如何在Angular独立组件中注入应用配置并添加HTTP拦截器（附错误示例）

你调用bootstrapApplication时传入了3个参数，但该函数仅支持1个（仅根组件）或2个参数（根组件+配置对象），这是报错的原因。

正确实现方式 #

方案1：扩展现有appConfig

将拦截器配置合并到已有的appConfig中，避免拆分参数：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ExampleInterceptor } from '../../../libs/shared/src/interceptors/example.interceptor';

// 扩展原配置，添加拦截器
const extendedAppConfig = {
  ...appConfig,
  providers: [
    ...(appConfig.providers || []), // 保留原配置中的providers
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ]
};

bootstrapApplication(AppComponent, extendedAppConfig)
  .catch((err) => console.error(err));

方案2：直接传入完整配置对象

如果不需要复用原appConfig，可以直接在第二个参数中定义所有配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ExampleInterceptor } from '../../../libs/shared/src/interceptors/example.interceptor';
import { provideHttpClient } from '@angular/common/http'; // 需引入HTTP相关provider

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(), // 初始化HTTP客户端
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ]
})
  .catch((err) => console.error(err));

核心要点：bootstrapApplication的第二个参数是唯一的配置入口，所有依赖注入、路由、环境等配置都必须包含在这个对象内，不能单独作为第三个参数传递。

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