角度 HttpClientModule 错误答案

【问题标题】：Angular HttpClientModule error角度 HttpClientModule 错误
【发布时间】：2018-08-27 19:02:51
【问题描述】：

我是 Angular 的新手，正在尝试服务 http。但是我遇到了这个问题。你们知道出了什么问题吗？谢谢

从终端，错误陈述是

根据报错信息，我去了module.d.ts文件

感谢你们，我已将其更改为 HttpClient 并且红线消失了，但我仍然从终端收到错误。并且页面仍然没有显示。

对于任何在终端中遇到错误消息的人，module.d.ts 中的 HttpClientModule 类应该为空。我通过打字稿的代码建议意外添加了它。感谢所有惊人的帮助

【问题讨论】：

完全不相关，但是你用什么主题？谢谢。

标签： angular http atom-editor

【解决方案1】：

应该是HttpClient。这就是用于进行 AJAX 调用的方法，

要使用 HttpClient，您必须将 HttpClientModule 添加到 NgModule 的 imports 数组中

所以它应该为您服务：

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

export class ProductService {
  private productUrl = 'api/products/products.json';

  constructor(private http: HttpClient) {}

  getProducts() {
    ...
  }
}

这在你的模块中：

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ /*Your Components Here*/ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这里有一个Stackblitz Project 可以帮助您。

【讨论】：

谢谢！我刚刚将其更改为 HttpClient，但仍然从 CLI 收到相同的错误消息，我是否也应该更改 module.d.ts 文件？
谢谢，你能帮忙再看看吗？我刚刚添加了一张新图片:)
您是否在 Service 构造函数中将 HttpClientModule 更改为 HttpClient？ constructor(private http: HttpClient) {}
你对module.d.ts做了什么修改吗？
尝试重启服务器。

【解决方案2】：

导入HttpClient

在 app.module.ts 中

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

imports:[HttpClientModule]

component.ts / service.ts

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

constructor(private http:HttpClient){

}

【讨论】：

【解决方案3】：

问题是您在服务文件中使用HttpClientModule，您应该改用HttpClient 类。 HttpClientModule 应该被导入到您的 app.module.ts 文件中，见下文：

app.module.ts

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

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

*.service.ts

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

...

constructor(public http: HttpClient) { }

getProducts(): Observable<IProduct[]> {
  const productUrl: '...';

  this.http.get<IProduct[]>(productUrl).pipe(
    tap(...),
    catchError(...)
  );
}

【讨论】：