Angular 模块导入的动态配置

Question

我们的 Angular 12 应用有一个模块，该模块导入我们想要基于 配置文件 配置的依赖项，该文件仅在运行时可用，而不是在编译时。

有问题的包是ng-intercom，尽管我想以后其他包也会出现同样的问题。

动态配置背后的动机是我们的应用程序在 4 个不同的环境中运行，我们不想为每个环境创建单独的构建，因为它们之间的唯一区别是包含后端 URL 和一些应用程序的配置文件ID（如对讲机、Facebook 应用 ID 等）

目前有问题的 import 是这样进行的：

imports: [
  ...
  IntercomModule.forRoot({
    appId: env.intercomID,
    updateOnRouterChange: true,
  }),
  ...

问题是 appID 应该是可配置的，env 变量应该是动态加载的。目前，它是一个导入并编译到代码中的 JSON，但这意味着我们无法在不为每个环境重新构建代码的情况下针对不同的环境更改它：

import env from '../../assets/environment.json';

我们有一个 APP_INITIALIZER，但是，它不会在解决之前阻止模块被导入：

{
  provide: APP_INITIALIZER,
  useFactory: AppService.load,
  deps: [AppService],
  multi: true,
},

...以及相关的配置加载器：

static load(): Promise<void> {
  return import('../../assets/environment.json').then((configuration) => {
    AppService.configSettings = configuration;
  });
}

我们可以使用此配置而不会对我们的组件和服务产生任何问题。

我们设法在angularx-social-login 的配置中实现了我们想要的结果：

providers: [
  ...
  {
    provide: 'SocialAuthServiceConfig',
    useValue: new Promise(async resolve => {
      const config = await AppService.config();
      resolve({
        autoLogin: true,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(config.facebookApi),
          }
        ]
    } as SocialAuthServiceConfig);
  ...
]

SocialAuthServiceConfig 是一个提供者，但是我们找不到类似配置 ng-intercom 导入的方法。

我们能以某种方式实现这一目标吗？ 有没有办法动态配置模块导入？

Answer 1

我认为不需要动态配置模块导入来实现这一点，相反，您可以执行以下操作：

• 导入不带forRoot函数的IntercomModule。
• 使用useFactory 函数提供IntercomConfig 类，该函数从AppService.configSettings 读取数据配置：

  providers: [
    {
      provide: IntercomConfig,
      useFactory: intercomConfigFactory,
    },
  ],

// ....

export function intercomConfigFactory(): IntercomConfig {
  return {
    appId: AppService.configSettings.intercomAppId,
    updateOnRouterChange: true,
  };
}

Answer 2

大多数库作者都提供了一种稍后初始化库的方法。 forRoot 电话可以伪造。如果需要配置对讲，仍然可以拨打forRoot，但可以使用空id：

  IntercomModule.forRoot({
    appId: null,
    updateOnRouterChange: true,
  }),

然后您可以使用app_id 调用boot。

 // AppComponent 
 constructor(private appService: AppsService, private intercom: Intercom) {
    this.startIntercom();
 }

 private async startIntercom() {
    const config = this.appService.config();
    this.intercom.boot({app_id: config.intercom_app_id});
 }

通常，您可以通过阅读库源代码学到很多东西。 大多数库都提供类似于intercom.boot 的方法。