angular - 如何导入模块或有条件地提供服务？ (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

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

按照另一个答案的建议尝试克服它是行不通的，它只会将相同的静态评估转移到另一个地方，并且编译失败或静默编译为无用的不正确常量。正确的方法是通过 providers 和 angular service worker 初始化，确实在以后的版本中修复了这个问题。但是 Angular 7 没有修复。

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

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

启用:'#INJECT_CODE(导航器中的“serviceWorker”)'作为任何

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

请注意，在默认构建/ng 服务中，该字符串将评估为 true。您可以将其与其他静态逻辑结合使用，例如environment.production && '#INJECT_CODE(... 否定调试构建(service worker 在 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>

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

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