[angular] Cannot find the '@angular/common/http' module

I am following this fundamental tutorial on Angular about Http.

As one can see in the "Setup: Installing the module" section, they import the HttpClientModule as follow:

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

When I try this in my project, I get the following error: "Cannot find module '@angular/common/http'".

I have tried importing the following module, as follow:

import { HttpModule } from '@angular/http';

And then my imports section:

imports: [
    HttpModule
],

The problem now is, I cannot inject this HttpModule into my service object, and I get the following error: "Cannot find module HttpModule".

Here is my service class:

import { Injectable, OnInit } from '@angular/core';
//Custom Models
import { Feed } from '../Models/Feed';

@Injectable()
export class FeedsService {
    constructor(private httpClient: HttpModule) {}
}

What am I doing wrong?

Update All I should have done when I realized I could not import the module as per the tutorial, was to run the npm update command, to update all my packages.

This question is related to angular node-modules

The answer is


note: This is for @angular/http, not the asked @angular/common/http!

Just import in this way, WORKS perfectly:

// Import HttpModule from @angular/http
import {HttpModule} from '@angular/http';


@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [... ]
})

and then you contruct in the service.ts like this:

constructor(private http: Http) { }

getmyClass(): Promise<myClass[]> {
  return this.http.get(URL)
             .toPromise()
             .then(response => response.json().data as myClass[])
             .catch(this.handleError);
}

Is this issue resolved.

I am getting this error: ERROR in node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts(3,27): error TS2307: Cannot find module '@angular/common/http/src/response'.

After updating my angular to version=8


Beware of auto imports. my HTTP_INTERCEPTORS was auto imported like this:

import { HTTP_INTERCEPTORS } from '@angular/common/http/src/interceptor';

instead of

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

which caused this error


Refer to this: http: deprecate @angular/http in favor of @angular/common/http.


I was using http in angular 5 that was a problem. Using Httpclient resolved the issue.


You should import http from @angular/http in your service:

import {Http} from '@angular/http';

constructor(private http: http) {} // <--Then Inject it here


// now you can use it in any function eg:
getUsers() {
    return this.http.get('whateverURL');
}

Important Update:

HttpModule and Http from @angular/http has been deprecated since Angular V5, should of using HttpClientModule and HttpClient from @angular/common/http instead, refer CHANGELOG.


For Angular version previous from **@4.3.0, You should inject Http from @angular/http, and HttpModule is for importing at your NgModule's import array.

import {HttpModule} from '@angular/http';

@NgModule({
  ...
  imports: [HttpModule]
})

Inject http at component or service

import { Http } from '@angular/http';

constructor(private http: Http) {}

For Angular version after(include) 4.3.0, you can use HttpClient from @angular/common/http instead of Http from @angular/http. Don't forget to import HttpClientModule at your NgModule's import array first.

Refer @echonax's answer.


For anyone using Ionic 3 and Angular 5, I had the same error pop up and I didn't find any solutions here. But I did find some steps that worked for me.

Steps to reproduce:

  • npm install -g cordova ionic
  • ionic start myApp tabs
  • cd myApp
  • cd node_modules/angular/common (no http module exists).

ionic:(run ionic info from a terminal/cmd prompt), check versions and make sure they're up to date. You can also check the angular versions and packages in the package.json folder in your project.

I checked my dependencies and packages and installed cordova. Restarted atom and the error went away. Hope this helps!


Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to node-modules

SyntaxError: Cannot use import statement outside a module What could cause an error related to npm not being able to find a file? No contents in my node_modules subfolder. Why is that? Node - was compiled against a different Node.js version using NODE_MODULE_VERSION 51 npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Nuwanst\package.json' Cannot find the '@angular/common/http' module How to use paths in tsconfig.json? Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type How to fix 'fs: re-evaluating native module sources is not supported' - graceful-fs How to provide a mysql database connection in single file in nodejs Git - Ignore node_modules folder everywhere