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

时间:2017-06-08 04:14:30

标签: javascript angular

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

export const APP_CONFIG = {
   ....
}

这是在webpack build上生成的。

现在,我的角度应用程序正在使用不同的角度模块。其中一些模块还需要app.config.ts中定义的环境配置。我正在使用NPM安装这些模块,因此可以在node_modules文件夹中找到它们。

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

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

我是否还应该在每个模块上创建环境配置?然后在webpack build上处理它?<​​/ p>

非常感谢任何想法。

1 个答案:

答案 0 :(得分:2)

如果我理解您的问题,您需要将配置信息从主应用程序传递到您自己的外部Angular库。您可以使用Angular docs here中解释的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静态方法并传入配置数据。您需要在libarary中创建适当的模型(在我的示例中为AppConfigModel),以接收您在forRoot方法中传递的APP_CONFIG。

imports: [
    MyLibraryModule.forRoot(APP_CONFIG),
 ]