Angular模块导入动态配置：运行时加载配置实现多环境复用同一构建包

可行方案 #

这里提供两种实现方式，可根据你的场景选择：

方案1：手动初始化Intercom（改动最小，兼容性最好） #

ng-intercom的forRoot配置仅为初始参数注入，你完全可以省略appId的初始配置，等运行时配置加载完成后手动调用初始化方法：

1. 调整模块导入，移除forRoot中的appId配置：

imports: [
  ...
  IntercomModule.forRoot({
    // 仅保留固定配置项
    updateOnRouterChange: true,
  }),
  ...
]

2. 修改AppService的加载逻辑，配置加载完成后直接初始化Intercom：

import { Intercom } from 'ng-intercom';

@Injectable({ providedIn: 'root' })
export class AppService {
  static configSettings: any;
  constructor(private intercom: Intercom) {}

  static load(appService: AppService): Promise<void> {
    return import('../../assets/environment.json').then((configuration) => {
      AppService.configSettings = configuration;
      // 加载配置后手动初始化Intercom
      appService.intercom.boot({
        app_id: configuration.intercomID
      });
    });
  }
}

原有APP_INITIALIZER配置无需修改，即可生效。

方案2：覆盖内部配置令牌（通用性更强，适合所有同类第三方库） #

大部分Angular第三方库的forRoot配置本质是给内部的配置注入令牌传值，ng-intercom内部使用INTERCOM_CONFIG令牌存储配置，你可以用和angularx-social-login完全一致的异步Provider方式动态注入配置：

1. 导入配置令牌：

import { INTERCOM_CONFIG, IntercomModule } from 'ng-intercom';

2. 调整根模块的providers配置，添加异步配置注入：

providers: [
  ...
  {
    provide: INTERCOM_CONFIG,
    useValue: new Promise(async resolve => {
      const config = await AppService.config();
      resolve({
        appId: config.intercomID,
        updateOnRouterChange: true
      });
    })
  },
  ...
]

该方案完全符合Angular依赖注入规范，后续遇到其他需要动态配置的第三方库时，只要找到其内部的配置注入令牌，都可以用相同逻辑实现，无需改动初始化流程。

注意事项 #

两种方案都无需修改现有构建逻辑，部署时仅需要替换assets目录下的environment.json即可实现不同环境的配置切换，不需要重新打包应用。

内容的提问来源于stack exchange，提问作者barney.balazs