如何有条件地导入模块或提供服务？ (AOT)答案

【问题标题】：How to import module or provide service conditionally? (AOT)如何有条件地导入模块或提供服务？ (AOT)
【发布时间】：2018-05-01 14:41:29
【问题描述】：

我的问题是 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 中给定服务的实例？这个解决方案也会让我满意。

【问题讨论】：

This link 可能感兴趣。这是 Rangle.io 团队记录的 AOT 限制的汇编
try const imports = [your default module] if condition import.push(serviceWorker)

标签： angular typescript dependency-injection service-worker

【解决方案1】：

根据我的研究，目前似乎没有办法克服只能使用编译时构造的 AOT 编译器限制。

按照另一个答案的建议尝试克服它是行不通的，它只是将相同的静态评估转移到另一个地方，要么编译失败，要么默默地编译成一个无用的不正确常量。正确的方法是通过提供程序进行初始化，并且 Angular Service Worker 确实在以后的版本中修复了这个问题。但是 Angular 7 没有修复方法。

但是，如果您可以运行额外的构建后脚本，则以下极其肮脏但有效的 hack 将允许将运行时代码注入到装饰器 AOT 编译代码中：

1) 不要使用编译失败或被 AOT 错误评估的构造，而是使用带有“宏”的字符串将脚本注入 AOT 编译的装饰器代码，例如

enabled: '#INJECT_CODE("serviceWorker" in navigator)' as any

编译器会在生成的 JS 代码中保留这个字符串。

注意，该字符串在默认的 build / ng serve 中将评估为 true。您可以将其与其他静态逻辑结合使用，例如environment.production && '#INJECT_CODE(... 否定调试版本（无论如何，服务工作者在 ng serve 上毫无用处）。

2) 构建后处理 main.*.js 并将 '#INJECT_CODE(XX)' 替换为 XX 。如果使用源映射，请使用空格保持表达式长度相同，以避免破坏映射。用 Ant 来说明：

<replaceregexp match="&quot;#INJECT_CODE(.*?)&quot;"
               flags="gs"
               preserveLastModified="true"
               replace="             \1 "
>
    <fileset dir="${basedir}">
        <include name="main*.js"/>
    </fileset>
</replaceregexp>

最终结果将是实际代码而不是宏字符串。对于更复杂的逻辑，为了避免污染代码和可能的极端情况，注入可能只是一个 window.XX，其中 XX 在模块加载之前被评估和存储，或者它可以是一个函数调用。在函数调用的情况下，它也应该被某个地方的普通代码引用，以避免摇树。

我想知道为什么 AOT 不提供类似这样的内置功能，或者至少不保留对窗口对象的运行时访问。

【讨论】：

【解决方案2】：

您可能希望使用另一个模块或函数来包装此逻辑。这不是现成的解决方案，需要一些工作，但它仍然足以向您展示这个想法：

@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 }
      ]
    };
  }
....

【讨论】：