angular2-jwt.d.ts gives "Cannot find module '@angular/http" error

Question

I'm working on angular2 "2.0.0-beta.17".

My package.json is as follows

"dependencies": {
        "angular2": "2.0.0-beta.17",
        "es6-shim": "^0.35.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "0.6.12",    
        "angular2-jwt":"0.1.15",
        "es6-promise": "^3.2.1",
        "jwt-decode": "^2.0.1"    
      },
      "devDependencies": {
        "angular-cli": "0.0.*",
        "autoprefixer": "^6.3.2",
        "copy-webpack-plugin": "^1.1.1",
        "css-loader": "^0.23.0",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.8.4",
        "html-loader": "^0.4.0",
        "html-webpack-plugin": "^2.8.1",
        "istanbul-instrumenter-loader": "^0.1.3",
        "jasmine-core": "^2.3.4",
        "jasmine-spec-reporter": "^2.4.0",
        "json-loader": "^0.5.3",
        "karma": "0.13.19",
        "karma-chrome-launcher": "^0.2.1",
        "karma-coverage": "^0.5.2",
        "karma-jasmine": "^0.3.7",
        "karma-phantomjs-launcher": "^1.0.0",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-webpack": "1.7.0",
        "node-sass": "^3.4.2",
        "null-loader": "git+https://github.com/webpack/null-loader.git",
        "phantomjs-prebuilt": "^2.1.4",
        "postcss-loader": "^0.8.0",
        "protractor": "^3.1.1",
        "raw-loader": "0.5.1",
        "rimraf": "^2.5.1",
        "sass-loader": "^3.1.2",
        "style-loader": "^0.13.0",
        "ts-loader": "^0.8.1",
        "tslint": "^3.4.0",
        "tslint-loader": "^2.1.0",
        "typedoc": "^0.3.12",
        "typescript": "^1.8.0",
        "typings": "^0.7.12",
        "url-loader": "^0.5.6",
        "webpack": "^1.12.13",
        "webpack-dev-server": "^1.14.1",
        "exports-loader": "^0.6.3",
        "expose-loader": "^0.7.1",
        "imports-loader": "^0.6.5",
        "tsconfig-lint": "^0.7.0"
      }

But after building my project I get following error:

ERROR in C:\\Users\\akhilesh.kumar\\Desktop\\ang17\\node_modules\\angular2-jwt\\angular2-jwt.d.ts (1,61): error TS2307: Cannot find module '@angular/http'.

ERROR in ./~/angular2-jwt/angular2-jwt.js Module not found: Error: Cannot resolve module '@angular/core' in C:\\Users\\akhilesh.kumar\\Desktop\\ang17\\node_modules\\angular2-jwt @ ./~/angular2-jwt/angular2-jwt.js 11:13-37

ERROR in ./~/angular2-jwt/angular2-jwt.js Module not found: Error: Cannot resolve module '@angular/http' in C:\\Users\\akhilesh.kumar\\Desktop\\ang17\\node_modules\\angular2-jwt @ ./~/angular2-jwt/angular2-jwt.js 12:13-37

Answer 1

The @angular/http is only available from RC versions of Angular2. Before it was angular2/http .

Since the angular2-jwt library requires the @angular/http module, you need to upgrade your application to a RC version of Angular2.

For this you can update your package.json file and execute the command: npm install :

"dependencies": {
   "@angular": "2.0.0-rc.1",
   (...)
}

Answer 2

你需要添加angular2-jwt的依赖项：

npm install angular2-jwt --save

Answer 3

As Thierry said " @angular/... supported later version of angular then "^2.0.0-rc.0"

So I changed The dependencies as follows:

"dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/platform-server": "^2.0.0-rc.1",
    "@angular/router-deprecated": "^2.0.0-rc.1",
    "angular2-jwt": "0.1.15",
    "es6-promise": "^3.2.1",
    "es6-shim": "^0.35.0",
    "jwt-decode": "^2.0.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },

and changed imports as follows

import {enableProdMode, provide} from "@angular/core";
import {ELEMENT_PROBE_PROVIDERS} from '@angular/platform-browser';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {Http,HTTP_PROVIDERS} from '@angular/http';
import { AuthConfig, AuthHttp } from 'angular2-jwt';

It worked.

Answer 4

It might be problem with your npm, Try to install the latest version of npm.

Linux:

npm install -g npm@lts

Answer 5

Providers have Http included by default, and in order to use Http in your app you will need to add the HttpModule to your app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
...

Answer 6

试试这个：

npm install @angular/http@latest

Answer 7

Currently in Angular 11 what error I faced was, I was installing npm install angular2-jwt but for Angular 11 this wont work.

So we need to first remove the above package using npm uninstall angular2-jwt

Install npm install @auth0/angular-jwt and then we can perform Token Authentication, if one is also stuck on Token Authentication

For further documentation one can visit https://github.com/auth0/angular2-jwt

Answer 8

This is my angular and node config :-

Angular CLI: 7.1.4 , Node: 10.6.0 , Angular: 7.1.4

and I fixed this

angular2-jwt.d.ts gives “Cannot find module '@angular/http” error

using

 npm i @angular/http@^2.0.0||^4.0.0 --save 

Answer 9

In angular 7 we use HttpClient instead of Http

You can import it like this

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