Angular - импортируйте оба BrowserAnimationsModule и NoopAnimationsModule и решите, что использовать во время выполнения (используя AOT)

Проблема в:

Я хочу импортировать NoopAnimationsModule только тогда, когда я нахожусь на IE. В массиве импорта моего app.module у меня есть что-то вроде:

imports: [AppConfig.IS_IE ? NoopAnimationsModule : BrowserAnimationsModule, .... ]

Это работает во время разработки, но не в производстве. Я предполагаю, что это связано с компиляцией AOT, когда импорт происходит до того, как код достигает браузера.

Я пришел к выводу, что мне нужно импортировать оба из них и что-то настроить во время выполнения, чтобы решить, каких поставщиков модуля мне следует использовать.

Имейте в виду, что оба эти модуля предоставляют одинаковые услуги, но с различиями, чтобы изменить способ, которым Angular обрабатывает анимацию.

Есть ли способ реализовать эту идею?

Всего 1 ответ


Это интересно. Вы правы, хотя раньше это не предотвращало, но, насколько я знаю, с плющом уже должно быть возможно сделать это по-своему, но я не уверен .

Только что проверил, и вы правы, с таким динамическим значением, это еще не работает

Если у вас есть хотя бы угловой 9, вы можете сделать следующее:

Поэтому я предполагаю, что ваш AppConfig.IS_IE будет установлен до импорта модуля анимации. Глядя на исходный код, я думаю, что вы могли бы сделать что-то подобное, создав собственный модуль анимации. При этом используется специальное свойство ɵinj , которое не является частью общедоступного API, поэтому оно может быть изменено:

@NgModule({
  exports: [BrowserModule],
})
export class ConfigAnimationsModule {
  static forRoot(isIE: boolean) {
    return {
      ngModule: ConfigAnimationsModule,
      providers: isIE
        ? NoopAnimationsModule.ɵinj.providers
        : BrowserAnimationsModule.ɵinj.providers
    };
  }
}

которые вы можете затем импортировать:

imports: [
  ConfigAnimationsModule.forRoot(AppConfig.IS_IE),
  //...
]

Для угловой версии <= 8 вы можете использовать приватное свойство ngInjectorDef . Хотя не проверено, поэтому ваш пробег может варьироваться:

@NgModule({
  exports: [BrowserModule],
})
export class ConfigAnimationsModule {
  static forRoot(isIE: boolean) {
    return {
      ngModule: ConfigAnimationsModule,
      providers: isIE
        ? NoopAnimationsModule['ngInjectorDef'].providers
        : BrowserAnimationsModule['ngInjectorDef'].providers
    };
  }
}

Есть идеи?

10000