Angular实现APP_INITIALIZER报Cannot mix multi providers错误如何解决

1. 第一个报错Error: Cannot mix multi providers and regular providers
APP_INITIALIZER是Angular内置的多提供者token，本身设计为支持同时注册多个初始化任务，必须搭配multi: true配置使用。你之前注释了该配置，单提供者的注册规则和Angular内部已有的多提供者注册逻辑冲突，触发报错。

2. 第二个报错TypeError: _this22.appInits[i] is not a function
APP_INITIALIZER的useFactory要求工厂函数返回一个可执行函数，Angular会主动调用这个函数，等待其返回的Promise执行完成后再启动应用。你当前的initializeApp直接返回了Promise对象，而非可执行函数，Angular调用时将Promise当作函数执行触发类型错误。

修改工厂函数和providers配置即可，完整修正后的代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, isDevMode, APP_INITIALIZER } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';

// 修改工厂函数，返回一个可执行函数
export function initializeAppFactory(http: HttpClient): () => Promise<void> {
  return () => new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('test');
      resolve();
    }, 1000);
  });
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      deps: [HttpClient],
      useFactory: initializeAppFactory,
      multi: true // 保留该配置
     },
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

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