Angular 16+：Resolver先于APP_INITIALIZER执行的异常问题

问题场景 #

使用Angular 16新的ResolveFn时，直接从浏览器访问带参数的路由（如localhost:4200/customer/123），Resolver会在APP_INITIALIZER的初始化逻辑完成前执行，导致依赖未加载完全而报错。测试示例的控制台输出顺序验证了这一点：

Start ServiceDb
customer resolver
End ServiceDb

解决方法 #

方案1：在Resolver中显式依赖初始化完成状态 #

通过自定义注入Token，将APP_INITIALIZER的初始化Observable暴露出来，让Resolver先等待该Observable完成再执行业务逻辑。

1. 定义注入Token并修改APP_INITIALIZER配置：

import { InjectionToken } from '@angular/core';
import { Observable } from 'rxjs';

// 定义保存初始化状态的Token
export const DB_INITIALIZATION = new InjectionToken<Observable<boolean>>('DB_INITIALIZATION');

// APP_INITIALIZER配置
{
  provide: APP_INITIALIZER,
  useFactory: (dbService: DbService, init$: Observable<boolean>) => {
    return () => init$;
  },
  deps: [DbService, DB_INITIALIZATION],
  multi: true
},
{
  provide: DB_INITIALIZATION,
  useFactory: (dbService: DbService) => dbService.initialize(),
  deps: [DbService]
}

2. 修改Resolver，注入初始化Observable并等待完成：

export const CustomerResolver: ResolveFn<ICustomer> = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
  customersService = inject(CustomersService),
  errorsService = inject(ErrorsService),
  dbInit$ = inject(DB_INITIALIZATION)
) => {
  const customer_Id = route.paramMap.get('customer_Id');
  
  if (customer_Id) {
    return dbInit$.pipe(
      switchMap(() => customersService.getById(customer_Id)),
      takeLast(1),
      catchError(errorsService.catch)
    );
  }

  return EMPTY;
};

方案2：全局路由守卫前置等待 #

如果多个Resolver都需要依赖初始化完成，可创建全局CanActivate守卫，在路由激活前先确保初始化完成。

1. 创建初始化守卫：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, of, take, map, catchError } from 'rxjs';
import { DbService } from './db.service';
import { DB_INITIALIZATION } from './tokens';

@Injectable({ providedIn: 'root' })
export class InitGuard implements CanActivate {
  constructor(
    @Inject(DB_INITIALIZATION) private dbInit$: Observable<boolean>
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.dbInit$.pipe(
      take(1),
      map(() => true),
      catchError(() => of(false))
    );
  }
}

2. 在路由配置中添加守卫：

const routes: Routes = [
  {
    path: 'customer/:customer_Id',
    component: CustomerComponent,
    resolve: { customer: CustomerResolver },
    canActivate: [InitGuard]
  }
];

方案3：将初始化逻辑转为Promise并注入 #

把DbService的初始化方法转为Promise，通过Token暴露给APP_INITIALIZER和Resolver，确保两者都等待初始化完成。

1. 修改DbService：

export class DbService {
  public initialize(): Promise<boolean> {
    console.log(`Start ServiceDb`);
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(`End ServiceDb`);
        resolve(true);
      }, 500);
    });
  }
}

2. 配置注入Token和APP_INITIALIZER：

export const DB_INIT_PROMISE = new InjectionToken<Promise<boolean>>('DB_INIT_PROMISE');

{
  provide: DB_INIT_PROMISE,
  useFactory: (dbService: DbService) => dbService.initialize(),
  deps: [DbService]
},
{
  provide: APP_INITIALIZER,
  useFactory: (initPromise: Promise<boolean>) => () => initPromise,
  deps: [DB_INIT_PROMISE],
  multi: true
}

3. 修改Resolver：

import { from } from 'rxjs';

export const CustomerResolver: ResolveFn<ICustomer> = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
  customersService = inject(CustomersService),
  errorsService = inject(ErrorsService),
  dbInitPromise = inject(DB_INIT_PROMISE)
) => {
  const customer_Id = route.paramMap.get('customer_Id');
  
  if (customer_Id) {
    return from(dbInitPromise).pipe(
      switchMap(() => customersService.getById(customer_Id)),
      takeLast(1),
      catchError(errorsService.catch)
    );
  }

  return EMPTY;
};

问题原因 #

Angular的APP_INITIALIZER在应用初始化阶段执行，但直接访问路由时，函数式的ResolveFn触发时机可能与APP_INITIALIZER并行——因为Resolver没有显式依赖初始化任务的完成状态，所以需要手动关联两者的执行顺序。

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