错误：StaticInjectorError（AppModule）[UserformService -> HttpClient]

Question

在尝试添加PrimeNG表格时，我在这里破坏了我的构建：https://github.com/BillyCharter87/Tech-O-Dex-UI/tree/BrokeIt。我记得我将package.json从TypeScript 2.3.4更新到2.4.0，由于（我认为）我正在使用Headers和Http进行POST调用，因此它已经崩溃了。我尝试将其设置回2.3.4，但没有用。我已经通过添加以下内容来修复了我能够解决的问题：

import { HttpClient, HttpHeaders } from "@angular/common/http";

但是我现在仍然遇到了HttpClient的错误。我已经尝试像这样将HttpClient导入到提供商中：providers: [HttpClient]，放在我的app.module.ts文件中。

完整的错误信息如下：

AppComponent.html:9 ERROR Error: StaticInjectorError(AppModule)[HttpClient -> HttpHandler]: 
StaticInjectorError(Platform: core)[HttpClient -> HttpHandler]: 
NullInjectorError: No provider for HttpHandler!

- Billy

Answer 1

请确保导入了HttpClientModule，而不是将HttpClient直接添加到提供程序列表中。

有关更多信息，请参见https://angular.io/guide/http#setup。

HttpClientModule实际上为您提供了HttpClient。请参见https://angular.io/api/common/http/HttpClientModule：

代码示例：

import { HttpClientModule, /* other http imports */ } from "@angular/common/http";

@NgModule({
    // ...other declarations, providers, entryComponents, etc.
    imports: [
        HttpClientModule,
        // ...some other imports
    ],
})
export class AppModule { }

- Kelvin Lai

---

如果我将其更改为HttpClientModule，则get无法正常工作public getServices(){ return this.http.get("http://report/abcd"); } - Kunal Tyagi

Answer 2

将此导入到 app.module.ts 中

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

并将这个添加到导入中

HttpClientModule

- Ragulan

Answer 3

在我的情况下需要的是：

@Injectable({
    providedIn: 'root'  // <- ADD THIS
})
export class FooService { ...

仅仅是：

@Injectable()
export class FooService { ...

- Mir-Ismaili

---

谢谢，这解决了我的问题 <3 - Ghanshyam Singh

谢谢你，先生。你可能为我节省了几个小时的时间。1+1=2 - Felipe Centeno

Answer 4

我只是在appmodule.ts中导入了它。

import { HttpClientModule } from '@angular/common/http';
  imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule  <<<this 
  ],

我的问题已解决

- Sudhansu

Answer 5

在你的 app.module.ts 文件中导入 HttpClientModule。

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

...
@NgModule({
...
  imports: [
    //other content,
    HttpClientModule
  ]
})

- Jameesjohn

Answer 6

在组件装饰器部分编写的所有自定义服务都可以提供。例如：providers: [serviceName]

注意：如果您正在使用服务在组件之间交换数据，请在模块级别声明providers: [serviceName]

- Piriya Ajay Kumar

Answer 7

在您的app.module.ts中添加HttpClientModule并尝试，它一定会起作用。 例如：

import { HttpModule } from '@angular/http

- lodey

Answer 8

有两个可能的原因： 1. 如果您在服务中使用了HttpClient，则需要在您的模块文件中导入HttpClientModule并在imports数组中进行声明。最初的回答。

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

2. 如果您的服务中使用普通的Http，您需要在模块文件中导入HttpModule并在imports数组中提及。

   import { HttpModule } from '@angular/http'

默认情况下，这在Angular中不可用，因此您需要安装@angular/http。

如果您希望在项目中同时使用HttpClientModule和HttpModule，则可以这样做。

- Dan Patil

Answer 9

这个错误有两个原因：

1）如果你在导入的数组中两次导入了HttpModule

2) 如果你还没有导入：

import { HttpModule, JsonpModule } from '@angular/http'; 

如果您想要运行，请执行以下操作：

npm install @angular/http

- Swapnil G Thaware