Angular v18独立组件报错：No provider for _HttpClient求助

问题背景 #

尝试通过Angular Service从本地Express服务器获取数据，Postman测试服务器接口运行正常，但执行ng serve时抛出依赖注入错误，常规解决方案无效。

Service代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Artikel } from './artikelInterface';
import { Observable, of } from 'rxjs';
import { HttpHeaders } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class ArtikelService {

  constructor(private http: HttpClient) 
  { }

    getAlleArtikel(): Observable<Artikel[]>
    {
    return this.http.get<Artikel[]>('http://localhost:3000/article');
   }
  
}

接收组件代码 #

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ArtikelService } from '../artikel.service';
import { Artikel } from '../artikelInterface';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-output',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  templateUrl: './output.component.html',
  styleUrls: ['./output.component.css']
})
export class OutputComponent implements OnInit {
  

  constructor(private artikelService: ArtikelService) {}
  Artikel: Artikel[] = [];

  ngOnInit(): void {
    this.artikelService.getAlleArtikel()
      .subscribe(data => this.Artikel = data);
  }
}

接口代码 #

export interface Artikel{
    id: number,
    ueberschrift: string,
    datum: string,
    autor: string,
    tesaer:string,
    text: string,
    tags: string[],
}

错误信息 #

R3InjectorError(Standalone[_AppComponent])[_ArtikelService -> _ArtikelService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!

at NullInjector.get (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:1654:27)
    at R3Injector.get (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
    at R3Injector.get (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
    at injectInjectorOnly (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:1100:40)
    at Module.ɵɵinject (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:1106:42)
    at Object.ArtikelService_Factory (/Users/jan/Desktop/BackTest/src/app/artikel.service.ts:11:28)
    at eval (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:3219:47)
    at runInInjectorProfilerContext (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:866:9)
    at R3Injector.hydrate (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:3218:21)
    at R3Injector.get (/Users/jan/Desktop/BackTest/node_modules/@angular/core/fesm2022/core.mjs:3082:33

问题原因及修复方案 #

错误核心是全局提供的ArtikelService依赖的HttpClient未在根注入器中注册。独立组件的imports仅作用于组件自身，无法为全局Service提供依赖。

具体修复步骤 #

1. 清理Service冗余导入
   删掉Service中无关的HttpClientModule、BrowserModule导入，保留必要内容：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Artikel } from './artikelInterface';
   import { Observable } from 'rxjs';
   

2. 在应用根级别注册HttpClient提供者

   • 若为独立组件启动的应用（bootstrapApplication），修改main.ts：

     import { bootstrapApplication } from '@angular/platform-browser';
     import { AppComponent } from './app/app.component';
     import { provideHttpClient } from '@angular/common/http';
     
     bootstrapApplication(AppComponent, {
       providers: [provideHttpClient()]
     });
     

   • 若为传统NgModule结构，修改AppModule：

     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { HttpClientModule } from '@angular/common/http';
     import { AppComponent } from './app.component';
     
     @NgModule({
       declarations: [AppComponent],
       imports: [BrowserModule, HttpClientModule],
       bootstrap: [AppComponent]
     })
     export class AppModule { }
     

3. 验证组件代码
   OutputComponent中已正确注入ArtikelService，无需修改。

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