Angular HttpClientModule错误

Question

I am new to Angular, was trying the service http. But I came across this problem. Do you guys know what has gone wrong? Thanks

from the terminal, the error stated is

According to the error message, I went to module.d.ts file

---

---

Thanks to you guys, i have changed it to HttpClient and the redline disappear, but I still got the error from terminal. and the page is still not showing.

---

---

For anyone came across the error message in terminal, the HttpClientModule class in module.d.ts should be empty. I added it accidentally throught code suggestion by typescript. Thanks for all the amazing helps

Answer 1

import HttpClient

In 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){

}

Answer 2

It should be HttpClient . That's what's used to make the AJAX Calls,

To use HttpClient though, you'll have to add the HttpClientModule to your imports array of the NgModule

So it should be in your service:

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

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

  constructor(private http: HttpClient) {}

  getProducts() {
    ...
  }
}

And this in your Module:

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 { }

Here's a Stackblitz Project to help you out with it.

Answer 3

The issue is that you are using the HttpClientModule inside your service file, you should be using the HttpClient class instead. The HttpClientModule should be imported into your app.module.ts file, see below:

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(...)
  );
}