Uncaught Error: Type HttpClient does not have 'ɵmod' property

Question

I'm creating a news app referring this link https://www.youtube.com/watch?v=D8J9QUwTWmU&t=3s&ab_channel=CodeXpression getting error while checking it first time on server I get

Uncaught Error: Type HttpClient does not have 'ɵmod' property

app.module.ts

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


import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule,HttpClient],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { HttpClient,HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private http:HttpClient) {}
}

Solution

1. Don't import HttpClient on app.module.ts
2. Don't import HttpClientModule in app.component.ts
3. Don't inject HttpClient directly in your app.component.ts, instead use a service.

This are 3 errors/bad practices I can see!

Comments

[Andrei]

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule,HttpClient] HttpClient shouldn't be here. just remove it and that is it

[Blastjackers]

Thank you...getting my console logs now :)

[Blastjackers]

Thank you..it works...I'm a newbie to this 😅

[devj]

Ok, you are welcome. Sign the question like solved 👍

[EnGoPy]

Can anyone briefly explain why those are bad practices? I found importing HttpClient in app.module.ts in one paid Angular course.

[Aklesh Singh]

@EnGoPy tutorial must be old, In angular we should import modules, i.e HttpClientModule. this will load all exported classes inside this particular module & after that you can just use HttpClient as a injected variable inside component/service constructor. Try creating module yourself to understand it better.

[sensorario]

Sorry @devj, I am new to angular, .. what does means "instead use a service"?

[JCollins]

@sensorario An ionic service is a type of resource, like a page, except it has no view. A service can be used to provide functionailty used by multiple pages. The ionic-cli can create an empty service with 'ionic generate service <service name>'. A web search for 'ionic service' should provide more informaion.