Angular如何在AppRoutingModule加载前完成JSON配置文件加载？

问题根源 #

Angular的模块初始化顺序是先完成所有导入模块的依赖解析、执行ROUTES等注入令牌的工厂函数，之后才会触发APP_INITIALIZER中的初始化逻辑。因此你原来的路由工厂执行时，ConfigService的配置还未加载，自然读取不到processId的值。

合法解决方案 #

方案1：main.ts预加载配置（优先推荐） #

在Angular应用启动前先加载配置文件，完全规避执行顺序问题，也不需要修改原有业务逻辑：

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { ConfigService } from './app/core/config.service';

if (environment.production) {
  enableProdMode();
}

// 先加载配置再启动Angular应用
fetch('/assets/app-config.json')
  .then(res => res.json())
  .then(config => {
    // 直接将配置存入ConfigService静态属性
    ConfigService.staticConfig = config;
    return platformBrowserDynamic().bootstrapModule(AppModule);
  })
  .catch(err => console.error('配置加载失败：', err));

对应修改ConfigService直接读取预加载的配置即可，不需要再用APP_INITIALIZER异步加载：

@Injectable()
export class ConfigService {
  static staticConfig: any;
  processId: number;

  constructor() {
    this.processId = ConfigService.staticConfig.processId;
  }
}

该方案完全异步，不会阻塞主线程，也能保证所有模块初始化时配置已经就绪。

方案2：加载配置后动态重置路由 #

如果不想修改应用启动逻辑，可以保留原有APP_INITIALIZER，配置加载完成后调用Router的resetConfig方法动态更新路由：

1. 先简化AppRoutingModule，只保留基础静态路由：

const routes: Routes = [
  { path: '', redirectTo: '/same-path', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改ConfigService的加载逻辑，加载完成后动态注入路由：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router, Routes } from '@angular/router';
import { OneComponent } from '../xxx/one.component';
import { OtherComponent } from '../xxx/other.component';

@Injectable()
export class ConfigService {
  processId: number;

  constructor(private router: Router) {}

  loadConfig(http: HttpClient) {
    return () => {
      return http.get('/assets/app-config.json')
        .toPromise()
        .then((config: any) => {
          this.processId = config.processId;
          // 根据配置生成动态路由
          const dynamicRoutes: Routes = this.processId === 1 
            ? [{ path: 'same-path', component: OneComponent }]
            : [{ path: 'same-path', component: OtherComponent }];
          // 合并原有路由，重置路由配置
          this.router.resetConfig([...this.router.config, ...dynamicRoutes]);
        });
    };
  }
}

CoreModule优化建议 #

你当前的CoreModule重复注册了ConfigService，可调整为仅在forRoot中注册，保证单例：

@NgModule({
  declarations: [],
  imports: [CommonModule]
})
export class CoreModule {
  static forRoot(): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      providers: [
        ConfigService,
        {
          provide: APP_INITIALIZER,
          useFactory: (cs: ConfigService, http: HttpClient) => cs.loadConfig(http),
          deps: [ConfigService, HttpClient],
          multi: true
        }
      ]
    };
  }
}

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