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

Answer 1

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';

Answer 2

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

Answer 3

尝试以下命令：

npm i @angular

Answer 4

There are some solutions to this problem and they are:

1. If your project has more than one modules then you have to import HttpClientModule from '@angular/common/http' in every module you have.

2. Add HttpClient inside providers from modules your project has, see the example:

    providers:[ UserService, HttClient]

But remember, it's not the good way to code but it works.

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

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