如何将环境配置注入不同的Angular模块

Question

我的angular应用程序中有一个app.config.ts，看起来像这样：

export const APP_CONFIG = {
....
}

这是在webpack生成时生成的。

现在我有不同的angular模块，它们位于我的angular应用程序正在使用的独立存储库中。其中一些模块还需要app.config.ts中定义的环境配置。我正在使用NPM安装这些模块，以便在node_modules文件夹中找到它们。

我的问题是如何在不创建对应用程序本身的依赖的情况下为这些模块提供环境配置？

我正在考虑将配置保存到一个全局变量，或者在应用程序的引导程序中将其保存到localStorage。

我还应该在每个模块上创建环境配置吗？然后在webpack构建中处理它？

任何想法都将不胜感激。

Answer 1

如果我理解您的问题，您需要将配置信息从主应用程序传递到自己的外部Angular库。您可以使用这里的Angular文档中解释的forRoot方法来实现这一点。

在外部Angular库内部，修改主导出模块，使其具有以下结构：

export class MyLibraryModule {
static forRoot(config: configData): ModuleWithProviders {
return {
ngModule: MyLibraryModule,
providers: [
{provide: AppConfigModel, useValue: config }
]
};
}
constructor(@Optional() config: AppConfigModel) {
if (config) { /* Save config data */ }
}
}

将此模块导入应用程序时，请使用forRoot静态方法并传入配置数据。您需要在库中创建适当的模型(在我的示例中为AppConfigModel)，以接收您在forRoot方法中传递的APP_CONFIG。

imports: [
MyLibraryModule.forRoot(APP_CONFIG),
]