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

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

1 голос
/ 26 марта 2020

Проблема:

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

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

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

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

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

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

1 Ответ

0 голосов
/ 26 марта 2020

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

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

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

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

@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),
  //...
]

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

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