APP_INITIALIZER未在其他提供商前解析Promise的问题求助

问题根源 #

Angular服务的实例化逻辑优先于APP_INITIALIZER执行，当SomethingService的构造函数被调用时，APP_INITIALIZER还未完成AppSettingsService的异步初始化，导致注入的API_BASE_URL获取到未初始化的undefined值。

解决方案 #

方案1：直接依赖AppSettingsService并等待初始化 #

修改服务逻辑，不再直接依赖API_BASE_URL令牌，转而依赖AppSettingsService，并通过Promise等待初始化完成后再使用配置值：

1. 更新AppSettingsService，暴露初始化完成的Promise供外部等待：

@Injectable({ providedIn: 'root' })
export class AppSettingsService {
  test: string | undefined;
  initialized: Promise<void>;

  constructor() {
    this.initialized = this.setup();
  }

  private setup(): Promise<void> {
    console.log('Executing promise');
    return new Promise(resolve => {
      setTimeout(() => {
        this.test = 'test';
        console.log('Resolving promise');
        resolve();
      }, 1000);
    });
  }
}

2. 修改SomethingService，使用时先等待初始化完成：

@Injectable({ providedIn: 'root' })
export class SomethingService {
  constructor(private appSettings: AppSettingsService) {}

  async doSomething() {
    await this.appSettings.initialized;
    console.log('Getting test string after init:', this.appSettings.test);
  }
}

3. 保留APP_INITIALIZER配置（可选，确保应用启动前完成初始化）：

{
  provide: APP_INITIALIZER,
  useFactory: (appSettings: AppSettingsService) => () => appSettings.initialized,
  deps: [AppSettingsService],
  multi: true
}

方案2：为API_BASE_URL添加异步初始化层 #

如果必须保留API_BASE_URL令牌，可以通过中间服务封装异步初始化逻辑：

1. 创建ApiBaseUrlService，负责获取并缓存初始化后的URL：

@Injectable({ providedIn: 'root' })
export class ApiBaseUrlService {
  private _url: string | undefined;
  get url(): string {
    if (!this._url) throw new Error('API_BASE_URL未完成初始化');
    return this._url;
  }

  constructor(appSettings: AppSettingsService) {
    appSettings.initialized.then(() => {
      this._url = appSettings.test;
    });
  }
}

2. 更新API_BASE_URL令牌的工厂函数：

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => inject(ApiBaseUrlService).url
});

3. 在SomethingService中使用时等待初始化：

@Injectable({ providedIn: 'root' })
export class SomethingService {
  constructor(@Inject(API_BASE_URL) private apiBaseUrl: string) {}

  async doSomething() {
    await inject(AppSettingsService).initialized;
    console.log('API Base URL:', this.apiBaseUrl);
  }
}

关键注意事项 #

• 避免在服务构造函数中执行依赖异步初始化的逻辑，这类逻辑应移到初始化方法中，并通过Promise/Observable等待就绪后再执行。
• Angular的APP_INITIALIZER仅保证在应用启动前完成，但不会影响服务实例化的顺序，因此同步依赖的令牌无法获取异步初始化后的结果。

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