Angular应用中出现NullInjectorError: No provider for Component错误的排查求助

看起来你在Angular依赖注入这块踩了个典型的坑，我来帮你梳理下问题所在，以及对应的解决方案：

核心问题分析 #

1. 错误地将组件注入到服务中 #

你在ApiCallService的构造函数里注入了ListComponent，这完全违背了Angular的设计原则：

• 组件是UI渲染单元，由Angular在DOM渲染时创建实例，不属于依赖注入容器管理的可注入服务类
• DI容器无法找到组件的提供者，自然会抛出NullInjectorError

2. 循环依赖问题 #

你的ListComponent中注入了ApiCallService，同时服务又注入组件，形成了循环依赖链：ApiCallService → ListComponent → ApiCallService，这也是Angular DI要严格避免的情况。

3. 冗余的Provider配置 #

• 你已经在ApiCallService上用providedIn: 'root'声明了根级注入，同时又在AppModule的providers里添加了该服务，这已经是冗余操作（providedIn: 'root'会自动注册到根模块）
• 更严重的是，你在ListComponent的providers数组里再次添加ApiCallService，这会导致每个ListComponent实例都创建一个新的服务实例，破坏了单例模式，还会引发状态不一致的问题。

解决方案 #

1. 移除服务中对组件的注入 #

彻底删掉ApiCallService里和ListComponent相关的代码：

@Injectable({
  providedIn: 'root',
})
export class ApiCallService {
  constructor(private http: HttpClient) { } // 移除ListComponent注入

  public getUsers() {
    return this.http.get<users[]>('https://jsonplaceholder.typicode.com/users');
  }

  public getPosts() {
    return this.http.get<posts[]>('https://jsonplaceholder.typicode.com/posts');
  }

  // 删掉原来的test()方法，因为它依赖组件实例
}

2. 用RxJS实现组件与服务的通信 #

如果你需要在组件和服务间传递数据（比如userId），应该用RxJS的Subject来实现，而不是直接调用组件方法：

• 在服务中定义一个Subject用来接收组件传递的数据
• 组件通过调用Subject.next()传递数据，服务通过订阅Subject处理逻辑

修改后的ApiCallService：

@Injectable({
  providedIn: 'root',
})
export class ApiCallService {
  // 定义Subject用于接收userId
  private userIdSubject = new Subject<number>();
  // 对外暴露可观察对象，避免外部直接调用next()
  userId$ = this.userIdSubject.asObservable();

  constructor(private http: HttpClient) {
    // 订阅userId的变化，处理业务逻辑
    this.userId$.subscribe(id => {
      console.log('Received userId from component:', id);
      // 这里可以添加你需要的业务逻辑
    });
  }

  // 提供方法让组件传递userId（也可以直接让组件调用next，封装方法更规范）
  sendUserId(id: number) {
    this.userIdSubject.next(id);
  }

  // 原有API方法保留
  public getUsers() {
    return this.http.get<users[]>('https://jsonplaceholder.typicode.com/users');
  }

  public getPosts() {
    return this.http.get<posts[]>('https://jsonplaceholder.typicode.com/posts');
  }
}

修改后的ListComponent：

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  // 移除这里的ApiCallService provider，根注入已经足够
  // providers: [ApiCallService]
})
export class ListComponent implements OnInit {
  constructor(private api: ApiCallService, private store: Store<{rootValue: RootState}>) { }

  users = [];
  // 移除原有UId$ Subject，改用服务的通信机制

  users$ = this.store.select('rootValue').pipe(map(data => data.users));
  posts$ = this.store.select('rootValue').pipe(map(data => data.posts));

  UserClicked(userId:number) {
    // 通过服务传递userId
    this.api.sendUserId(userId);
  }

  // 移除原有SendID方法

  ngOnInit(): void {
  }
}

3. 清理冗余的Provider配置 #

• 保留ApiCallService上的providedIn: 'root'，删掉AppModule的providers数组里的ApiCallService（因为providedIn: 'root'会自动注册）
• 删掉ListComponent的providers数组里的ApiCallService

这样调整后，既符合Angular的依赖注入规范，又能实现组件与服务间的安全通信，同时彻底解决了NullInjectorError的问题。

备注：内容来源于stack exchange，提问作者addy