Can't find HttpClientModule in Angular 14

Question

Here's my environment information:

Angular CLI: 14.0.2
Node: 16.15.1
Package Manager: npm 8.11.0
OS: win32 x64

Angular: 14.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.2
@angular-devkit/build-angular   14.0.2
@angular-devkit/core            14.0.2
@angular-devkit/schematics      14.0.2
@schematics/angular             14.0.2
rxjs                            7.5.5
typescript                      4.7.4

I'm trying to add this line:

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

to the app.module.ts, but angular says it can't find it. I tried deleting the node_modules directory as suggested here and then rerunning npm install, but it didn't help. Visual Studio Code hasn't pulled the files back in as it was suggested.

I do see a few modules in @angular/common like this will import successfully:

import { APP_BASE_HREF } from '@angular/common';

I made the following change to app.module.ts, but I get the error (Cannot find HttpClientModule):

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QuoteData } from './quotes/quotedata';
import { QuotesComponent } from './quotes/quotes.component';
//import { HttpClientModule } from '@angular/common';  //Why can't angular find this?

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

You say you added this line: import { HttpClientModule } from '@angular/common/http'; But the code you posted has import { HttpClientModule } from '@angular/common'; - no http. — Chris Hamilton
– Chris Hamilton, Commented Jun 20, 2022 at 22:21

user796446 · Accepted Answer · 2022-06-20 19:32:33Z

0

You added the import statement at top, but did you declare it in your ngModule imports? Also, in the future it would be useful to post the code under discussion - in this case app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

answered Jun 20, 2022 at 19:32

user796446

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Over a year ago

I think I tried that earlier, but I definitely tried it just now and it didn't work.

user796446 Over a year ago

You must have both the file import AND the ngModule import. When you say "cannot find httpclientModule, what is the specific error?

Sajjan Kumar · Accepted Answer · 2022-08-24 08:41:29Z

0

Please use
import { HttpClientModule} from '@angular/common/http/index';
instead of
import { HttpClientModule} from '@angular/common/http';

answered Aug 24, 2022 at 8:41

Sajjan Kumar

32 bronze badges

3 Comments

Eliseo Over a year ago

Please, read the docs, your answer is erroneous

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

lyrio Over a year ago

I'm using Angular 16, and only "import { HttpClientModule} from '@angular/common/http' " worked for me.

Collectives™ on Stack Overflow

Can't find HttpClientModule in Angular 14

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related