Error: Uncaught (in promise) NullInjectorError No provider for HttpClient

Question

请 我需要帮忙

当我启动服务器时，consle 中的浏览器中什么也没有出现，我发现这条消息

错误错误：未捕获（承诺）：NullInjectorError：R3InjectorError（AppModule）[HttpService -> HttpClient -> HttpClient -> HttpClient]： NullInjectorError：没有 HttpClient 的提供者！

这是 app.module.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule
  

  ],
  providers: [HttpClient],
  bootstrap: [AppComponent]
})
export class AppModule { }

服务.ts

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


@Injectable({
  providedIn: 'root'
})
export class HttpService {
  url: string ='http://localhost:8080/todo/'

  constructor(private http: HttpClient) { }

  public fetchAll():Observable<Todo[]>{

    return this.http.get<Todo[]>(this.url + 'findall')

  }
}

应用程序路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ShowAllComponent } from './components/show-all/show-all.component';



const routes: Routes = [
  { path: '', component: ShowAllComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

组件.ts

import { Component, OnInit } from '@angular/core';
import { Todo } from 'src/app/model/Todo';
import { HttpService } from 'src/app/services/http.service';


@Component({
  selector: 'app-show-all',
  templateUrl: './show-all.component.html',
  styleUrls: ['./show-all.component.css']
})
export class ShowAllComponent implements OnInit {
  listOfTodos!:Todo[]

  constructor(private httpService: HttpService) { }
  
  ngOnInit(): void {
    this.httpService.fetchAll().subscribe(todo => this.listOfTodos=todo);

  }

}

Answer 1

根据Angular文档，您必须在

BrowserModule

之前导入

HttpClientModule

。您的代码正好相反。

此外，在 providers 数组中指定

HttpClient

也可能导致错误，因为它的目的是注入组件或服务，而不是在 NgModule 中使用。