can't find mudule @angular/common/http(Not using SystemJs)

Question

I'm using visual studio 2017 template for my application. The visual studio 2017 project mean angular provide the client side app while asp.net core mvc provide back service. I'm trying to create an http interceptor but having issue with TypeScript loading the module. Please see the code below:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
//  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

I have imported the required module through npm. My package.json is posted below:

    {
      "name": "MYAPP",
     "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "dependencies": {
    "@angular/animations":"^4.4.4",
    "@angular/common": "^4.4.4",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/forms": "^4.4.4",
    "@angular/http": "^4.4.4",
    "@angular/platform-browser": "^4.4.4",
    "@angular/platform-browser-dynamic": "^4.4.4",
    "@angular/platform-server": "^4.4.4",
    "@angular/router": "^4.4.4",
    "angular2-jwt": "^0.2.1",
    "@ngtools/webpack": "^1.5.0",
    "@types/webpack-env": "^1.13.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12",
    "jwt-decode": "2.2.0" 
  },
  "devDependencies": {
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "chai": "4.0.2",
    "jasmine-core": "2.6.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3"
  }
}

Does someone know why typescript can't find the required module?

Thanks B

https://stackoverflow.com/questions/45207615/cannot-find-the-angular-common-http-module Have you checked this? — Amit Chigadani, Oct 06 '17 at 12:45
I tried what was suggested in the possible dublick. 1) I'm using webPack. 2) i set to use all the latest angular packages. That is currently not helping — Meelfan Bmfp, Oct 06 '17 at 12:50
@amit, yes i did. I'm not using HttpClientModule. Here is what i'm trying to do: https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8 — Meelfan Bmfp, Oct 06 '17 at 12:57
@pixelbits no using this tutorial : https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8 — Meelfan Bmfp, Oct 06 '17 at 13:03

Michael Kang · Accepted Answer · 2017-10-06T13:10:56.670

I noticed you were on angular@4.2.x You need to upgrade Angular because @angular/common/http was introduced in angular 4.3.x

After you've updated (npm update), make sure you've imported the HttpClientModule:

app.module.ts

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

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

[Edit]

You should be using @angular/common/http because its the latest evolution of http. That being said, if you are following an Angular2 tutorial which is using the older http module.

To use the older module:

npm install @angular/http

Then import the module:

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

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

There are two different ways of implementing interceptors - the old way using @angular/http and the new way using @angular/common/http. You can't follow an @angular2 tutorial to implement an interceptor in @angular4

https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8 not angular 2 tutorial — Meelfan Bmfp, Oct 06 '17 at 13:12
I'm not sure if its outdated. I think I misunderstood what the issue is. Are you trying this within Visual Studio? — Michael Kang, Oct 06 '17 at 13:14

can't find mudule @angular/common/http(Not using SystemJs)

1 Answers1