使用Observables初始化Angular应用遇阻，求可行解决方案

你的代码不生效有两个关键原因：

1. init()方法返回的是Subscription对象（subscribe()的返回值），而APP_INITIALIZER需要Promise<any>或Observable<any>来等待初始化完成，Subscription无法被Angular识别为待完成的异步任务；
2. 你在providers配置中写错了属性名：应该是provide而非provider，这个拼写错误会导致Angular无法正确识别APP_INITIALIZER的配置。

同时，你希望在服务内部处理数据保存逻辑、不把订阅逻辑暴露到工厂函数的需求，可通过RxJS的tap操作符实现。

步骤1：修改初始化服务，用tap处理副作用并返回Observable #

tap操作符用于执行副作用（比如保存数据到本地变量），但不会改变Observable的数据流，也不会提前触发订阅，完美适配你的需求：

// init.service.ts
import { tap, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

...
constructor(private http: HttpClient){}

// 定义本地变量存储初始化数据
private localData: any;

public init(): Observable<any> {
  return this.http.get(url).pipe(
    tap((data) => {
      // 在这里完成数据保存到本地变量的逻辑
      this.localData = data;
    })
  );
}
...

步骤2：修正APP_INITIALIZER配置，返回可被等待的异步对象 #

Angular支持APP_INITIALIZER的工厂函数返回Observable或Promise，这里提供两种可选方案：

方案A：直接返回Observable（Angular 14+推荐）

Angular会自动订阅并等待Observable完成：

// app.module.ts
... 
export function initializeApp(initService: InitService) {
  return () => initService.init();
}
...
providers: [
  {
    provide: APP_INITIALIZER, // 修正拼写错误：provider → provide
    useFactory: initializeApp,
    deps: [InitService],
    multi: true
  }
]
...

方案B：转换为Promise（兼容旧版本Angular）

如果你的项目是Angular 13及以下版本，建议转换为Promise确保兼容性：

// app.module.ts
... 
export function initializeApp(initService: InitService) {
  // 用toPromise()将Observable转换为Promise，等待初始化完成
  return () => initService.init().toPromise();
}
...
providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: initializeApp,
    deps: [InitService],
    multi: true
  }
]
...

如果你一定要在服务内部手动订阅（不推荐，会额外多一次订阅），可以通过first()确保Observable只执行一次并完成，再转换为Promise返回：

// init.service.ts
import { tap, first, Observable } from 'rxjs';
...
public init(): Promise<any> {
  const observable = this.http.get(url).pipe(
    tap((data) => {
      this.localData = data;
    }),
    first() // 确保Observable完成，避免Promise一直处于pending状态
  );
  // 手动订阅
  observable.subscribe();
  // 返回Promise供APP_INITIALIZER等待
  return observable.toPromise();
}

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