Angular 8中APP_INITIALIZER配置初始化异常问题求助

背景与问题 #

我基于Angular 8开发项目，在AppModule中配置了APP_INITIALIZER用于加载全局配置：

{
  provide: APP_INITIALIZER,
  useFactory: initConfig,
  deps: [AppConfigService],
  multi: true,
}

对应的工厂函数：

export function initConfig(appConfig: AppConfigService) {
 return () => appConfig.loadConfig();
}

初始的配置加载实现：

public loadConfig() {
  return this.http.get(environment.config,{responseType: 'text'})
    .toPromise()      
    .then((configVal: any) => {          
      this.config = this.extractData(configVal);        
    })
    .catch((err: any) => {        
      console.error(err);
    });
}

提供给全应用的配置获取方法：

getConfig() {    
  return this.config;
}

项目同时使用适配Angular 8的MSAL V1库，通过platformBrowserDynamic初始化应用。

首次加载异常 #

清空缓存后首次加载应用时，loadConfig的异步请求耗时较长，侧边栏组件提前访问AppConfigService.config导致页面加载失败，刷新后恢复正常。

修改后的异常 #

为解决问题，我将loadConfig改为以下实现：

public loadConfig() {
  let innerfunc = async  () => {
    try {
         let response = await fetch(environment.config);    
         let configtext = await response.text();
         this.config = await this.extractData(configtext);
        }
        catch(err){
          console.error(err);
        }
      }
  innerfunc();
}

路由配置示例：

{
  path: 'dashboard',
  canActivate: [MsalGuard,AuthService],
  loadChildren: () => import('./lazymodules/dashboard/dashboard.module').then(m => 
  m.DashboardModule)
}

新实现出现异常：首次从根路径加载正常，但后续所有页面加载时getConfig()返回undefined，疑似loadConfig被多次调用，且调用时机晚于侧边栏组件访问config的时间。

问题解析 #

为什么第一种实现能正常工作且仅执行一次？ #

1. Angular的APP_INITIALIZER机制：APP_INITIALIZER要求初始化函数必须返回一个Promise，Angular会等待这个Promise完成后，才会继续执行应用初始化流程（包括组件初始化、路由解析等）。第一种实现中，loadConfig直接返回了http.get(...).toPromise()的结果——一个完整的Promise，确保Angular等待配置加载完成后再渲染依赖配置的组件，避免了组件提前访问空值的问题。
2. 单例服务特性：AppConfigService是在AppModule中注册的单例服务，APP_INITIALIZER只会在应用启动时触发一次loadConfig，后续路由切换（包括懒加载模块）不会重复执行初始化逻辑，config值会一直保存在单例实例中，刷新后因为缓存存在，请求耗时缩短，组件能正常获取配置。

第二种实现为何失效？ #

核心问题是没有返回Promise给Angular：

1. 虽然innerfunc是async函数（执行后返回Promise），但loadConfig没有将这个Promise返回给Angular的APP_INITIALIZER。Angular无法感知异步加载的完成，会直接跳过等待，继续初始化应用，导致组件可能在配置赋值前就调用getConfig()获取空值。
2. 首次根路径加载正常只是巧合（异步请求刚好在组件访问前完成），但后续路由切换时，MSAL守卫或懒加载模块的逻辑可能触发APP_INITIALIZER再次执行，此时异步加载还未完成，组件就已经读取config，自然返回undefined。
3. 额外问题：使用原生fetch而非Angular的HttpClient，脱离了Angular的变更检测机制，即便配置赋值完成，组件也可能无法及时更新，但最关键的还是没有返回Promise让Angular等待初始化完成。

内容的提问来源于stack exchange，提问作者harsha kumar Reddy