Angular：NullInjectorError：没有HttpClient的提供者[重复]

Posted 2023-03-13

【中文标题】Angular：NullInjectorError：没有HttpClient的提供者[重复]

【英文标题】：Angular : NullInjectorError: No provider for HttpClient [duplicate]

【发布时间】：2019-12-25 22:35:45

【问题描述】：

我已经实现了一个简单的 Angular 应用程序，它有一个调用服务的组件，该服务又调用一个 api。我已经在应用模块的提供者中注册了该服务，但出现以下错误。

 NullInjectorError: No provider for HttpClient

我创建了一个 stackblitx 来复制问题

stackblitz

代码

服务

import  Injectable  from '@angular/core';
import  Observable  from 'rxjs';
import  HttpClient, HttpHeaders, HttpParams  from '@angular/common/http';
import  map, catchError  from 'rxjs/operators';
const httpPostOptions = 

    headers:
        new HttpHeaders(
            
                'Content-Type': 'application/json; charset=utf-8',
            ),
    withCredentials: true,



@Injectable(
    providedIn: 'root'
)
export class AbcCommonService 

    webApplication = this.getApiLocation();

    private getApiLocation() 
        return location.protocol + '//' + location.hostname;
    

    constructor(private httpClient: HttpClient)  

    httpGet(url: string): Observable<any> 
        return this.httpClient.get(this.webApplication + url, httpPostOptions)
            .pipe(map((response: Response) => 
                return response;
            ), catchError(error => 
                this.onError(error);
                return Promise.reject(error);
            ));
    

应用模块

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule  from '@angular/forms';
import  HttpClientModule  from '@angular/common/http'; 
import  AbcCommonService  from './shared/abc.common.service';
import  AppComponent  from './app.component';
import  ListWrapperComponent  from './list-wrapper/list-wrapper.component';

@NgModule(
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ListWrapperComponent ],
  bootstrap:    [ AppComponent ],
  providers: [AbcCommonService ],
)
export class AppModule  

【问题讨论】：

将HttpClientModule 添加到app.module.ts 中的imports 数组中，就像您导入的所有其他模块一样！

请努力连google。我花了一秒钟才找到那个重复的；）

【参考方案1】：

添加

import  HttpClientModule  from '@angular/common/http'; 

@NgModule(
  imports:      [ HttpClientModule ]
)

在app.module.ts内