모듈을 가져 오거나 조건부로 서비스를 제공하는 방법은 무엇입니까? (AOT)

Question

내 문제는 Angular 모듈 중 하나가 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은 상태에 관계없이 가져올 수 있습니다. 솔루션으로

나는 ngDoBootstrap 방법으로 조금 재생을 시도했다 :

이

@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 주석에 수입 된 모듈을 변경하는 방법을 모르겠어요. 어느 클래스의 어떤 메소드를 사용해야합니까?

아마도 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 } 
     ] 
    }; 
    } 
....