Angular引入OAuthService后UI无显示的NullInjectorError报错求解

• 错误日志已经明确给出核心报错：NullInjectorError: No provider for HttpClient!，Angular 依赖注入器找不到 HttpClient 对应的服务提供者
• angular-oauth2-oidc 库的 OAuthService 内部依赖 HttpClient 发送OIDC认证请求、拉取身份服务配置等，你没有在项目中导入并注册 HttpClient 相关模块，导致依赖注入失败，Angular 启动时抛出的错误直接阻断了页面渲染。

步骤1：在AppModule中导入HttpClientModule #

打开你的 app.module.ts 文件，从 @angular/common/http 包导入 HttpClientModule，并添加到 imports 数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 新增导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 加入到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2：（可选，适配低版本库）手动注册OAuthService #

如果你使用的是旧版本的 angular-oauth2-oidc，还需要手动把 OAuthService 注册到提供者数组，同样在 app.module.ts 中修改：

// 新增导入OAuthService
import { OAuthService } from 'angular-oauth2-oidc';

@NgModule({
  // 其余配置保持不变
  providers: [OAuthService], // 加入到providers数组
})
export class AppModule { }

修改完成后重新启动项目，依赖注入就能正常加载所需服务，页面即可正常渲染。

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