モジュールをインポートするか、条件付きでサービスを提供するにはどうすればよいですか？ （AOT）

Question

私の問題は、Angularモジュールの1つがSafariブラウザで正しく動作しないことです。

私は、次のコードしている：あなたは、私は条件付きでモジュールをインポートする見ることができるように

@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
     BrowserAnimationsModule, 
     BrowserModule.withServerTransition({ 
      appId: 'app' 
     }), 
     AppModule, 
     'navigator' in window && 'serviceWorker' in navigator ? ServiceWorkerModule.register('./ngsw-worker.js') : ServiceWorkerModuleMock 
    ] 
}) 

を。 JITコンパイルを使用しているとき、このメカニズムはうまくいきます。残念ながら、それはAOTと一緒に働いていません - ServiceWorkerModuleMockは条件に関係なくインポートされます。

@NgModule({ 
    entryComponents: [ AppComponent ], 
    imports: [ 
     BrowserAnimationsModule, 
     BrowserModule.withServerTransition({ 
      appId: 'app' 
     }), 
     AppModule, 
     ServiceWorkerModule.register('./ngsw-worker.js') 
    ] 
}) 
export class BrowserAppModule { 
    constructor(private injector: Injector) {} 

    public ngDoBootstrap(appRef: ApplicationRef): void { 
     // console.log('navigator' in window && 'serviceWorker' in navigator); 

     appRef.bootstrap(AppComponent); 
    } 
} 

しかし、これまでのところ、私はモジュールがここ@NgModule注釈にインポート変更することができますかわからない：私はngDoBootstrap方法で少しを再生しようとしたソリューションとして

。どのクラスのどのメソッドを使うべきですか？

Injectorで指定されたサービスのインスタンスを変更することは可能でしょうか？その解決策も私を満足させるでしょう。

Answer 1

このロジックをラップするには、別のモジュールまたは関数を使用することをお勧めします。これは、準備ができて解決策ではなく、いくつかの作業が必要ですが、まだあなたのアイデアを表示するのに十分な良いです：

また

@NgModule({ 
    ... 
}) 
export class MyBootstrapModule { 
    static getModule() { 
     if ('navigator' in window && 'serviceWorker' in navigator) { 
      return ServiceWorkerModule.register('./ngsw-worker.js') 
     } else { 
      return ServiceWorkerModuleMock; 
     } 
    } 
} 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
     BrowserAnimationsModule, 
     BrowserModule.withServerTransition({ 
      appId: 'app' 
     }), 
     AppModule, 
     MyBootstrapModule.getModule() 
    ] 
}) 

、あなたは、たとえばngrx effects moduleのために、より洗練されたモジュールの設定のいくつかの他の例を見てみることができます。それはかなりシンプルです（その一部を参照）。彼らがどのように使用するかに注意してくださいngModule。まさしく必要なことに応じて、モジュールからいくつかのものを再定義して再インポート/再エクスポートする必要があるかもしれません。

@NgModule({ 
    providers: [ 
    Actions, 
    EffectsSubscription, 
    { 
     provide: APP_BOOTSTRAP_LISTENER, 
     multi: true, 
     deps: [ Injector, EffectsSubscription ], 
     useFactory: runAfterBootstrapEffects 
    } 
    ] 
}) 
export class EffectsModule { 
    static run(type: Type<any>) { 
    return { 
     ngModule: EffectsModule, 
     providers: [ 
     EffectsSubscription, 
     type, 
     { provide: effects, useExisting: type, multi: true } 
     ] 
    }; 
    } 
....