Angular依赖注入报错：NullInjectorError问题求助

报错信息 #

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)

已尝试操作 #

• 在app.module.ts的providers数组中手动注册服务（未使用@Injectable的providedIn配置）
• 在app.module.ts中导入HttpClientModule
• 给服务的@Injectable装饰器设置providedIn: 'root'

排查与解决步骤 #

• 核对服务注册的准确性
  确认服务类的文件名、类名拼写完全无误；如果用providedIn: 'root'，要确保@Injectable装饰器写法正确：@Injectable({ providedIn: 'root' })（注意大括号不能漏）；如果用providers数组注册，必须在app.module.ts中正确导入服务类并加入数组：

  // app.module.ts
  import { YourTargetService } from './services/your-target.service';
  
  @NgModule({
    ...
    providers: [YourTargetService],
    ...
  })
  export class AppModule {}
  

• 排查循环依赖问题
  检查是否存在服务互相注入的情况（比如Service A注入Service B，Service B又注入Service A），这种循环依赖会导致注入失败。可以用@Optional()装饰器临时规避，或者重构代码拆分依赖逻辑。

• 统一服务注册方式
  如果服务同时在providedIn: 'root'和懒加载模块的providers数组中注册，会导致实例冲突。建议统一使用providedIn: 'root'，并移除懒加载模块中的服务注册。

• 清理缓存重启服务
  执行ng clean（Angular 12+版本），或者手动删除node_modules/.angular、dist文件夹，然后重启ng serve，排除缓存导致的依赖注入异常。

• 检查服务使用场景
  不要在非Angular依赖注入环境中直接new服务实例（比如普通函数、main.ts的初始代码中），必须通过组件/服务的构造函数注入，或者通过Angular注入器获取实例：

  // 错误示例
  const service = new YourTargetService();
  
  // 正确示例（组件中）
  constructor(private yourService: YourTargetService) {}
  

• 确认HttpClientModule配置
  如果服务中依赖HttpClient，务必确保HttpClientModule已经在app.module.ts的imports数组中正确导入，没有拼写错误：

  // app.module.ts
  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [HttpClientModule, ...],
    ...
  })
  

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