如何在Angular的APP_INITIALIZER中调用服务并正确注入依赖？

修正方案 #

你代码里有几处明显的语法和配置错误，修正后即可正常注入服务并完成初始化预加载： #

存在的错误点

• 服务调用方式错误：getCommission是服务实例方法，不能直接通过类名GetComissionService调用，要使用注入进来的实例对象comissionService调用
• useFactory配置错误：工厂函数需要接收deps声明的依赖项，并且返回初始化执行后的Promise，而不是直接返回函数引用
• 拼写不一致：导入的服务名GetComissionService和函数参数声明的类型GetCommissionService拼写不一致（后者多了一个m）
• 冗余的Promise封装：RxJS提供了直接把Observable转为Promise的方法，不需要手动封装new Promise

修正后完整代码

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
// 确认服务拼写和实际文件导出的一致，如果是拼写错误建议统一改成正确的Commission（双m）
import { GetComissionService } from '../app/services/get-comission.service';
import { AppComponent } from './app.component';

function initializeApp(comissionService: GetComissionService): () => Promise<void> {
  return () => firstValueFrom(comissionService.getCommission('item'))
    .then(data => {
      console.log('预加载数据完成', data);
      // 可以在这里把数据存到服务或者状态管理器里后续全局使用
    });
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    // 确认服务已经被提供，如果你服务里用了providedIn: 'root'就不用再加，否则要加上
    GetComissionService,
    {
      provide: APP_INITIALIZER,
      deps: [GetComissionService],
      // 工厂函数直接返回initializeApp执行后的结果
      useFactory: initializeApp,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外注意

如果你的GetComissionService没有加@Injectable()装饰器，或者没有配置providedIn: 'root'，需要先补上，否则Angular无法完成服务的实例化注入。

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