Angular 8启动时从API设置LOCALE_ID及懒加载方案失效问题

看起来你遇到的问题是Angular版本升级后初始化时机的间接变更导致的——在Angular 8中，LOCALE_ID的工厂函数执行时间早于SharedResolver的resolve方法，所以当localeFactory调用localeService.getLocale()时，服务还没完成初始化。

核心原因 #

Angular 8对应用初始化流程做了底层调整，使得应用级别的依赖（比如LOCALE_ID）的注入时机提前，而路由解析器（Resolver）是在第一次路由导航时才会执行。这就导致你的LocaleService还没被Resolver初始化，就已经被LOCALE_ID的工厂函数调用了。

正确的实现方案 #

把LocaleService的初始化逻辑从路由Resolver移到APP_INITIALIZER中，这样可以确保在应用启动完成前就完成Locale的初始化，保证LOCALE_ID工厂函数调用时服务已经准备就绪。

步骤1：创建Locale初始化函数

在你的AppModule（或者单独的初始化文件）中添加一个专门用于初始化Locale的函数：

export function localeInitializer(
  localeService: LocaleService, 
  authService: AuthService, 
  storageService: StorageService,
  languageApi: LanguageApi
) {
  return () => {
    // 复用你之前Resolver里的核心逻辑，获取用户配置并设置Locale
    return forkJoin([
      authService.getCurrentProfileFromApi(),
      languageApi.getActiveLanguages()
    ]).pipe(
      tap(([profile]) => {
        const languageName = profile.languageName || navigator.language;
        console.log('Set locale to languageName=' + languageName);
        storageService.setLocale(languageName);
        localeService.setLocale(languageName);
      }),
      catchError(() => {
        // 处理请求失败的情况，设置默认Locale避免应用卡住
        const defaultLocale = 'en';
        storageService.setLocale(defaultLocale);
        localeService.setLocale(defaultLocale);
        return of(null);
      })
    ).toPromise();
  };
}

步骤2：在AppModule中注册APP_INITIALIZER

修改AppModule的providers数组，添加这个新的初始化器：

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SharedModule.forRoot(),
    AccountModule,
    ApiModule,
    GenesysSubprojectModule
  ],
  declarations: [AppComponent],
  providers: [
    AppRouteGuard,
    BreadcrumbService,
    { provide: APP_INITIALIZER, useFactory: appInitializerFactory, deps: [PlatformLocation, BootstrapService], multi: true },
    { 
      provide: APP_INITIALIZER, 
      useFactory: localeInitializer, 
      deps: [LocaleService, AuthService, StorageService, LanguageApi], 
      multi: true 
    },
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
    APP_LOCALE_ID // 现在这个可以正常工作了
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

步骤3：移除Resolver中的Locale初始化逻辑

既然已经在APP_INITIALIZER中完成了Locale的初始化，你可以从SharedResolve的resolve方法中移除设置Locale的代码，避免重复执行。

额外注意事项 #

• 确保LocaleService是单例服务：因为你是通过SharedModule.forRoot()提供的，这一点应该已经满足，但要确认forRoot()方法中正确注册了LocaleService（比如用providedIn: 'root'或者在forRoot的providers数组中声明）。
• 处理异步初始化的错误：APP_INITIALIZER支持返回Promise，一定要处理请求失败的情况，避免应用卡在初始化阶段。

内容的提问来源于stack exchange，提问作者Botond Béres