Angular 18独立应用APP_INITIALIZER报错：appInits is not a function

错误根源 #

TypeError: appInits is not a function 是因为你的APP_INITIALIZER工厂函数onAppStart存在两个核心问题：

• Observable未被订阅且错误使用await：你直接用await处理userService.InitUserProfile()返回的Observable，但Observable是惰性执行的，不订阅就不会发起请求；同时await无法直接处理Observable类型，必须先将其转换为Promise。
• Promise提前resolve：代码未等待异步请求完成就调用resolve(true)，导致Angular的应用初始化流程出现异常。

修复后的onAppStart函数 #

import { firstValueFrom } from 'rxjs';

export function onAppStart(): Promise<any> {
  const router = inject(Router);
  const userService = inject(UserService);
  
  return new Promise(async (resolve, reject) => {
    try {
      // 将Observable转换为Promise，等待请求完成
      const r = await firstValueFrom(userService.InitUserProfile());
      
      if (r == undefined) {
        await router.navigate(['/']);
      }
      
      resolve(true);
    } catch (e) {
      console.error(e);
      // 可选：若初始化失败需阻止应用启动，可调用reject(e)
      resolve(true);
    }
  });
}

关键修改说明 #

1. 用firstValueFrom转换Observable为Promise：这是RxJS官方推荐的转换方式，会自动订阅Observable并等待第一个返回值（或请求完成）。
2. 等待异步操作完成后再resolve：确保用户信息请求结束（无论成功或失败）后，再通知Angular继续启动流程。
3. 完善错误捕获：通过try/catch处理请求中的异常，避免未处理错误导致初始化崩溃。

额外优化建议 #

在InitUserProfile中提前处理空evoCode的情况，避免发起无效请求：

import { of } from 'rxjs';

public InitUserProfile(): Observable<UserDataModel | undefined> {
  const evoCode = localStorage.getItem('user.evo') ?? '';
  if (!evoCode) {
    return of(undefined);
  }
  
  return from(
    this.client
      .get(new GetUserDataRequest({ evoCode }))
      .then((r) => {
        if (r.model.email) {
          this.userData.set(r.model);
          return r.model;
        }
        return undefined;
      })
  );
}

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