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

Question

I have a app.config.ts in my angular app that look something like this:

export const APP_CONFIG = {
   ....
}

This is generated on webpack build.

Now I have different angular modules that are on separate repository which is being used by my angular app. Some of these modules also needs the environment configs defined in app.config.ts. I am installing these modules using NPM so they are found in node_modules folder.

My problem is how am I going to supply the environment config to these modules without creating a dependency to the App itself?

I am thinking of saving the config to a global variable or saving it to localStorage on bootstrap of the app.

Should I also create environment configs on each module? Then handle it on webpack build?

Any ideas would be much appreciated.

Answer 1

If I understand your question, you need to pass configuration information from your main application to your own external Angular libraries. You can do that using the forRoot methodology explained in the Angular docs here .

Inside of your external Angular library modify the main exported module to have this structure:

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 */ }
  }

 }

When you import this module into your application, use the forRoot static method and pass in the config data. You will need to create the appropriate model in your libarary (AppConfigModel in my example) to receive the APP_CONFIG you are passing in the forRoot method.

imports: [
    MyLibraryModule.forRoot(APP_CONFIG),
 ]