Angular 16独立组件注入ProductService时遇HttpClient缺失错误

错误原因 #

你的ProductService依赖HttpClient，但独立组件的注入上下文未注册HttpClient的提供者——独立组件不会自动继承NgModule的提供者，必须显式添加相关配置。

解决方案 #

方式1：在独立组件的providers数组中注册HttpClient（Angular 14+推荐） #

在ProductListComponent的组件定义中，导入provideHttpClient并添加到providers数组：

import { Component, OnInit } from '@angular/core';
import { ProductService } from './path-to/product.service';
import { provideHttpClient } from '@angular/common/http';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
  standalone: true,
  providers: [
    provideHttpClient() // 注册HttpClient的提供者
  ]
})
export class ProductListComponent implements OnInit {
  constructor(private productService: ProductService) {}
  // ... 组件逻辑代码
}

方式2：在路由配置中注册HttpClient（组件通过路由加载时适用） #

如果ProductListComponent是路由懒加载的，可在路由配置的providers中添加：

import { Routes } from '@angular/router';
import { ProductListComponent } from './product-list.component';
import { provideHttpClient } from '@angular/common/http';

export const productRoutes: Routes = [
  {
    path: '',
    component: ProductListComponent,
    providers: [provideHttpClient()]
  }
];

额外优化：移除组件providers中的ProductService #

你的ProductService已设置providedIn: 'root'，说明它是根注入器提供的单例服务，无需再添加到组件的providers数组，直接注入即可使用。

验证 #

完成修改后重启应用，HttpClient的提供者会被正确注册，依赖注入错误即可解决。

内容的提问来源于stack exchange，提问作者Berlin Johns. M