Angular: HttpClientModule import error (could not be resolved to an NgModule class)

Admin 1
Viewed 36001

I was trying to build a simple app with crud on fake json server

but i can't import HttpClientModule

Here is error message from VS Code :

ERROR in node_modules/@angular/common/http/http.d.ts:2801:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

    This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

    2801 export declare class HttpClientModule {

Here is app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeCreateComponent } from './employee-create/employee-create.component';
import { EmployeeEditComponent } from './employee-edit/employee-edit.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';

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


@NgModule({
  declarations: [
    AppComponent,
    EmployeeCreateComponent,
    EmployeeEditComponent,
    EmployeeListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'restTest6';
}

note that : I didn't use HttpClientModule anywhere else. I imported and did ng serve -o and got error. Please point out what went wrong

angular typescript
9 Answers

I had the same problem, I just run the following command and it worked after without any error.

npm cache verify

If it does not, try manually deleting the node_modules folder and reinstalling the modules with npm install.

rm -rf node_modules
npm install

On npm > 6, you can also run npm ci, which also deletes the node_modules folder and reinstall packages after.

Edit As other answers suggested, you may need to restartng serve if the above steps do not work (but they normally do)

user_11607940

just stop ng serve before adding new package, after adding new package restart ng serve. This will solve this issue.

user_104658730

First Stop ng serve and run these commands...

npm cache verify
rm -rf node_modules
npm install

After the installation build & run your project using the commands

ng build
ng serve

It works for me and solve the issue...

user_128879000

You can add this HttpClientModule to imports in app.component.ts.

imports: [HttpClientModule]
user_111903130

First of all, you just need to delete the node-modules folder then update the npm by using the command

npm i -g npm

Then you need to build your project for maintenance of the angular project which can be done by using the command

ng build

then you will be able to serve or host the project by typing the command

ng serve

user_131803020

I resolved this issue by using the following steps

  1. stoped ng serve cmd
  2. ran npm cache verify cmd
  3. started ng serve cmd
user_142237970

I had the same issue. So, I manually deleted node_modules and then npm install. It solved as this issue was because of the corrupt dependencies.

user_118557360

In my case closed VS Code, re-opened the project and did 'ng serve'. It worked.

user_11245920

In my case, I was making some unit tests and I have added HttpModule into the app.module.ts file in the imports section. To solve this problem I just removed the HttpModule import from the app module and it fixed the error.

// app.module.ts

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
    // Removed from here <--
   ...
user_104856060
Related