APP_INITIALIZER 不阻止导入的模块答案

【问题标题】：APP_INITIALIZER not blocking imported modulesAPP_INITIALIZER 不阻止导入的模块
【发布时间】：2019-03-03 18:49:41
【问题描述】：

我有一个 Angular (v6.0.0) 应用程序，我正在尝试设置它，并在 APP_INITIALIZER 期间引入运行时配置。我已经阅读了几篇文章（例如 this 和 this 和 this）以及诸如 this 之类的 SO 问题，并且大部分都可以正常工作。

当应用程序启动时（APP_INITIALIZER 期间），我有应用程序调用配置服务函数来加载配置。这一切都完美无缺。问题是应用程序的其他部分正在加载/初始化/它们的构造函数在配置加载之前被调用，因此无法使用文件中的配置。以下是 app.module 文件的摘录：

function initConfig(configService: AppConfigService) {
    return () => configService.loadConfig();
}

...

@NgModule({
    imports: [AuthModule, SharedModule]
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: initConfig,
            deps: [AppConfigService],
            multi: true
        },
        ...
    ]
})

和 AppConfigService 文件：

public loadConfig() {
    return this._http.get('./assets/app-config/config.json')
        .toPromise()
        .then((config: any) => {
            this.config = config;
        })
}

如您所见，loadConfig 函数返回一个承诺，并且配置已加载（我已经确认）。

但是，我尝试访问 AuthModule 构造函数中的配置（因此我可以提取与服务器进行身份验证所需的配置值）和 SharedModule 中的服务（在这种情况下正在寻找 Sentry DSN），并且它们都在加载配置之前运行。我相信还会有其他示例，但这是我目前发现的。

我的印象是，在APP_INITIALIZER 解决之前，应用程序中的任何内容都不会加载，但显然情况并非如此。我缺少什么来完成这个吗？我可以做些什么来让所有其他模块在初始化之前等待配置加载？如果不是，那基本上就达不到运行时配置的目的了。

【问题讨论】：

您是否在您的 app.module.ts 中添加了“AppConfigService”并且仅在此模块中添加提供者？（不要将提供者添加到主模块中的其他模块中，否则您将有两个或更多实例服务）
嗯，AppConfigService 设置了providedIn: root 选项，并且它没有列在整个应用程序的任何providers 数组中。
@pjlamb12，你能创建一个简单的演示来模仿你使用 stackblitz 的设置吗？我去看看
@MaxWizardK 我会尝试重现它。困难的部分是试图弄清楚它在哪些服务中做了这个，哪些没有。但是，当我弄清楚如何重现该问题时，我会在这里发表评论。
@MaxWizardK 我一直在尝试重现这一点，但到目前为止还无法重现。

标签： angular

【解决方案1】：

我最近遇到了您所面临的问题。不幸的是，正如可能已经知道的那样，APP_INITIALIZER 不会阻止模块的导入。您可以使用全局窗口对象来附加您的配置数据。这样，数据就可以在您的应用程序中全局访问。

public loadConfig() {
    return this._http.get('./assets/app-config/config.json')
        .toPromise()
        .then((config: any) => {
            window['appConfigData'] = config;
            this.config = config;
        })
}

在属于 SharedModule 的服务中，您可以简单地从窗口对象访问配置数据。

constructor() {
  ..
  ..
    const configData = window['appConfigData'];
}

【讨论】：