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

Question

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

export const APP_CONFIG = {
   ....
}

这是在 webpack 构建时生成的。

现在我有不同的角度模块，它们位于我的角度应用程序正在使用的单独存储库中。其中一些模块还需要 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),
 ]