Angular13如何运行时配置StoreDevtoolsModule或预加载外部配置？

问题背景 #

使用Angular 13.3.2 + NgRx Store，原本在app.module.ts中通过environment文件配置StoreDevtoolsModule的logOnly属性：

imports: [
  // ...其他导入
  StoreModule.forRoot({root: appReducer}),
  EffectsModule.forRoot([]),
  StoreDevtoolsModule.instrument({
    name: 'Homegenius DevTools',
    maxAge: 25,
    logOnly: environment.isProduction
  })
]

为实现一次构建、多环境部署，计划移除对environment文件的依赖，将配置存入config.json，通过构建后工具替换环境特定值。但直接导入config.json时，程序读取的是编译时的静态值，而非部署后替换的最新值；使用APP_INITIALIZER提前加载config.json后，在模块导入阶段AppConfig.settings仍为undefined（因为APP_INITIALIZER在模块导入完成后才执行）。

解决方案：动态配置StoreDevtools #

步骤1：修改StoreDevtoolsModule初始导入 #

在app.module.ts中导入StoreDevtoolsModule时，先设置默认禁用状态的配置：

imports: [
  // ...其他导入
  StoreModule.forRoot({root: appReducer}),
  EffectsModule.forRoot([]),
  StoreDevtoolsModule.instrument({
    name: 'Homegenius DevTools',
    maxAge: 25,
    logOnly: false,
    enabled: false // 先禁用，等配置加载完成后再启用
  })
]

步骤2：在配置加载后动态更新StoreDevtools #

修改AppConfig服务，注入StoreDevtools服务，在加载完config.json后动态配置DevTools：

import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpBackend } from '@angular/common/http';
import { StoreDevtools } from '@ngrx/store-devtools';

export interface IAppConfig {
  isProduction: boolean;
  // 其他配置字段
}

@Injectable({ providedIn: 'root' })
export class AppConfig {
  static settings: IAppConfig;
  http: HttpClient;

  constructor(
    private readonly httpHandler: HttpBackend,
    @Inject(StoreDevtools) private readonly storeDevtools: StoreDevtools
  ) {
    this.http = new HttpClient(httpHandler);
  }

  loadAppSettings() {
    return new Promise<void>((resolve, reject) => {
      const jsonFile = `assets/configs/config.json`;
      this.http
        .get<IAppConfig>(jsonFile)
        .toPromise()
        .then(appSettings => {
          AppConfig.settings = appSettings;
          // 动态更新StoreDevtools配置
          this.storeDevtools.configure({
            name: 'Homegenius DevTools',
            maxAge: 25,
            logOnly: appSettings.isProduction,
            enabled: true
          });
          resolve();
        })
        .catch(error => {
          console.error('加载配置文件失败:', error);
          reject(error);
        });
    });
  }
}

步骤3：保持原APP_INITIALIZER配置 #

原app.module.ts中的APP_INITIALIZER配置无需修改，确保配置在应用初始化前加载完成：

function appSettingsLoader(appSettingsService: AppConfig): any {
  return () => appSettingsService.loadAppSettings();
}

providers: [
  AppConfig,
  {
    provide: APP_INITIALIZER,
    useFactory: appSettingsLoader,
    deps: [AppConfig],
    multi: true
  }
]

原理说明 #

• 模块导入阶段先初始化StoreDevtools但禁用，避免依赖编译时配置
• APP_INITIALIZER执行时加载最新的config.json配置
• 配置加载完成后，通过StoreDevtools服务的configure方法动态设置logOnly和启用状态，确保使用的是部署后替换的真实配置值

内容的提问来源于stack exchange，提问作者shashi kanth