Cannot find module "@angular/common/http"

Question

I have upgraded my npm to the latest version. The npm folder in my Visual Studio Application reads v6.0.3 while my package.json file also corresponds to this version 6.0.3.

But any time I run my application I get the error cannot find module on the browser

I believe HttpClient is used in versions above 3x but obviously have a higher version installed.

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { QuizListComponent } from './components/quiz/quiz-list.component';



@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        QuizListComponent
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

pakage.json

{
  "name": "ExamBuddy",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "6.0.3",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/compiler-cli": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@angular/platform-server": "6.0.3",
    "@angular/router": "6.0.3",
    "@ngtools/webpack": "6.0.7",
    "@types/chai": "4.1.3",
    "@types/jasmine": "2.8.7",
    "@types/webpack-env": "1.13.6",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^3.0.0",
    "awesome-typescript-loader": "5.0.0",
    "bootstrap": "4.1.1",
    "chai": "4.1.2",
    "css": "2.2.3",
    "css-loader": "0.28.11",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.5",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.11",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "3.1.0",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "karma": "2.0.2",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.2",
    "karma-webpack": "3.0.0",
    "preboot": "6.0.0-beta.4",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.0",
    "style-loader": "0.21.0",
    "to-string-loader": "1.1.5",
    "typescript": "2.8.3",
    "url-loader": "1.0.1",
    "webpack": "4.10.2",
    "webpack-hot-middleware": "2.22.2",
    "webpack-merge": "4.1.2",
    "zone.js": "0.8.26"
  }
}

you may be try to import httpCilent from '@angular/common/http'; — Muhammed Albarmavi
– Muhammed Albarmavi, Commented May 31, 2018 at 10:49
There was never an version 3 of angular, anyways you can try after running this command rm -rf node_modules/ && npm cache clean -f — Pardeep Jain
– Pardeep Jain, Commented May 31, 2018 at 10:50

Salahuddin Ahmed · Accepted Answer · 2021-06-26 09:21:09Z

5

You need to have latest version of angular http:

npm install @angular/http@latest

Import HttpClient in your service component (if required):

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

Import HttpClientModule in app.module.ts //already there in your code:

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

edited Jun 26, 2021 at 9:21

answered Jun 26, 2021 at 8:49

Salahuddin Ahmed

5,7344 gold badges20 silver badges40 bronze badges

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

Comments

Nick Gallimore · Accepted Answer · 2023-06-07 09:57:38Z

1

There are some solutions to this problem and they are:

If your project has more than one module then you have to import HttpClientModule from '@angular/common/http' in every module you have.
Add HttpClient inside providers from modules your project has, see the example:
```
providers:[
   UserService, 
   HttpClient]
```

It is preferred to import HttpClientModule into each module.

Remove the node_modules folder and clean the npm cache. Then install all dependencies typing `npm i. Execute de code below:

rm -rf node_modules/ && npm cache clean -f && npm i

edited Jun 7, 2023 at 9:57

Nick Gallimore

1,30315 silver badges37 bronze badges

answered Nov 30, 2021 at 9:52

Martinho Mussamba

4675 silver badges6 bronze badges

Comments

Muhammed Albarmavi · Accepted Answer · 2018-05-31 10:57:28Z

0

You may be try to import HttpMoudle from '@angular/common/http' so in any case Http and HttpModule the can import from '@angular/http', but HttpClient and HttpClientModule the are importe from '@angular/common/http'.

so if useHttpClient in your component/service and must you import HttpClientModule in your @NgModule

example :

// app.module.ts:

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

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

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})
export class MyAppModule {}

edited May 31, 2018 at 10:57

answered May 31, 2018 at 10:46

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

4 Comments

Alabede Abdulmalik Over a year ago

i have added the following import { HttpClientModule } from '@angular/common/http'; to the app.module and i have also included it under the imports. but i still have the same problem.

Muhammed Albarmavi Over a year ago

have you try run npm install ??

Alabede Abdulmalik Over a year ago

Yes i have. npm is installed fine

Muhammed Albarmavi Over a year ago

Can you share with us app.module.ts

Tomer Shetah · Accepted Answer · 2021-01-18 21:48:12Z

0

Try the following command:

npm i @angular

edited Jan 18, 2021 at 21:48

Tomer Shetah

8,5597 gold badges31 silver badges40 bronze badges

answered Jan 17, 2021 at 13:08

Yunus Fidan

1

Collectives™ on Stack Overflow

Cannot find module "@angular/common/http"

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related