如何在Angular新的provideAppInitializer中结合依赖使用useFactory？

问题描述 #

我需要按顺序初始化 StorageService 和 SessionService，完成后用户才能进入应用。原来基于 APP_INITIALIZER 的实现代码如下：

export function initApp(
  storage: StorageService,
  session: SessionService,
) {
  return async () => {
    await firstValueFrom(
      storage.initialized$.pipe(
        filter((event) => (event ? true : false)),
        take(1),
      ),
    )

    await firstValueFrom(
      session.initialized$.pipe(
        filter((event) => (event ? true : false)),
        take(1),
      ),
    )
  }
}

之前的配置方式：

{
  provide: APP_INITIALIZER,
  useFactory: initApp,
  deps: [StorageService, SessionService],
  multi: true,
},

但切换到最新的 provideAppInitializer API 后，我不清楚如何传入依赖。Angular 官方示例是这样的：

provideAppInitializer(() => {
  const initializerFn = ((service: Service) => {
    return () => service.init();
  })(inject(Service));
  return initializerFn();
});

请问该如何适配我的顺序初始化需求？

解决方案 #

你可以直接在 provideAppInitializer 的回调函数中使用 inject() 方法获取所需服务，无需额外配置依赖。以下是两种可行的实现方式：

方式一：直接在回调内编写初始化逻辑 #

provideAppInitializer(() => {
  // 直接注入所需服务
  const storage = inject(StorageService);
  const session = inject(SessionService);

  // 保留原有的顺序初始化逻辑
  return async () => {
    await firstValueFrom(
      storage.initialized$.pipe(
        filter(event => !!event),
        take(1)
      )
    );

    await firstValueFrom(
      session.initialized$.pipe(
        filter(event => !!event),
        take(1)
      )
    );
  };
})

方式二：改造原有初始化函数适配新 API #

调整 initApp 函数，让它在注入上下文内获取依赖：

export function initApp() {
  const storage = inject(StorageService);
  const session = inject(SessionService);

  return async () => {
    await firstValueFrom(
      storage.initialized$.pipe(
        filter(event => !!event),
        take(1)
      )
    );

    await firstValueFrom(
      session.initialized$.pipe(
        filter(event => !!event),
        take(1)
      )
    );
  };
}

// 在 providers 中使用
provideAppInitializer(initApp)

核心说明 #

provideAppInitializer 的回调函数运行在 Angular 的注入上下文环境中，因此可以直接调用 inject() 来获取任何已注册的服务，替代了旧 API 中 deps 数组的作用。两种方式都能保证先等待 StorageService 初始化完成，再等待 SessionService 初始化完成，符合你的业务需求。

内容的提问来源于stack exchange，提问作者Raphaël Balet