APP_BASE_HREF令牌工厂在APP_INITIALIZER完成前调用，软件出现Bug（附Plunkr示例）

嘿，我帮你排查这个Bug的核心问题——这大概率是异步的APP_INITIALIZER和APP_BASE_HREF、自定义ErrorHandler的初始化顺序冲突导致的，这是Angular异步加载配置时很容易踩的坑。

问题根源 #

你现在用三个独立工厂分别配置APP_INITIALIZER、APP_BASE_HREF和ErrorHandler：

• AppInitializerFactory是异步加载JSON配置（包含baseHref和submitToSentry）
• 但APP_BASE_HREF和自定义ErrorHandler会在应用启动早期就被实例化，这时候异步配置还没加载完成，它们拿到的都是未初始化的默认值，自然就出现了“之前正常现在失效”的问题。
• 之前能正常运行，应该是当时的配置加载是同步的，没有时序冲突。

修复方案 #

核心思路是让依赖配置的提供者（APP_BASE_HREF、ErrorHandler）等待APP_INITIALIZER的异步配置加载完成，具体可以通过集中管理配置的方式实现：

1. 创建一个配置服务来统一管理加载的配置

@Injectable({ providedIn: 'root' })
export class ConfigService {
  // 存储加载后的配置
  loadedConfig: { baseHref: string; submitToSentry: boolean } | null = null;

  // 异步加载配置的方法
  async loadAppConfig() {
    // 这里替换成你的实际配置加载逻辑，比如HTTP请求
    const configResponse = await fetch('/assets/app-config.json');
    this.loadedConfig = await configResponse.json();
  }
}

2. 调整APP_INITIALIZER的工厂函数，调用配置服务的加载方法

export function appInitializerFactory(configService: ConfigService) {
  // 返回一个Promise，Angular会等待这个Promise完成后再继续初始化应用
  return () => configService.loadAppConfig();
}

3. 让APP_BASE_HREF和ErrorHandler通过工厂函数依赖配置服务
   这样它们会在配置加载完成后再被实例化，就能拿到正确的配置值：

// APP_BASE_HREF的工厂函数
export function appBaseHrefFactory(configService: ConfigService) {
  // 提供默认值避免配置加载失败的情况
  return configService.loadedConfig?.baseHref || '/';
}

// 自定义ErrorHandler的工厂函数
export function customErrorHandlerFactory(configService: ConfigService) {
  return new CustomErrorHandler(configService.loadedConfig?.submitToSentry || false);
}

4. 在AppModule中统一配置这些提供者

@NgModule({
  // ...其他模块配置
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [ConfigService],
      multi: true
    },
    {
      provide: APP_BASE_HREF,
      useFactory: appBaseHrefFactory,
      deps: [ConfigService]
    },
    {
      provide: ErrorHandler,
      useFactory: customErrorHandlerFactory,
      deps: [ConfigService]
    }
  ]
})
export class AppModule { }

额外说明 #

Angular的APP_INITIALIZER会等待所有返回Promise的初始化函数完成后，才会继续启动应用。所以只要依赖配置的提供者都通过工厂函数依赖ConfigService，就能确保它们拿到的是已经加载完成的配置值，解决之前的失效问题。

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