Unhandled Promise rejection: No provider for AuthHttp! ; Zone: angular in angular2-jwt

Question

dashboard.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import { AuthHttp } from 'angular2-jwt';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

constructor (private http: Http,private authHttp: AuthHttp) {}

When I do this it gives an error Error: Uncaught (in promise): Error: DI

app.module.ts

import { HttpModule } from '@angular/http';
import { AuthModule } from 'angular2-jwt';
.
imports: [
  HttpModule,
  AuthModule   
],

How I resolve this?

Answer 1

try this

import { AUTH_PROVIDERS } from 'angular2-jwt';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
    ],
    providers: [
        ...AUTH_PROVIDERS,
        // other providers
    ]
})

export class AppModule { }

option 2

import { AuthModule, AuthConfigConsts} from 'angular2-jwt';

const authConfig: IAuthConfig = {
    headerName: AuthConfigConsts.DEFAULT_HEADER_NAME, // change to your header name
    headerPrefix: AuthConfigConsts.HEADER_PREFIX_BEARER, // or null or something else
    tokenName: AuthConfigConsts.DEFAULT_TOKEN_NAME, // change to your token name
    tokenGetter: () => localStorage.getItem(authConfig.tokenName) as string,
    noJwtError: false,
    noClientCheck: false,
    globalHeaders: [],
    noTokenScheme: false
};

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AuthModule.forRoot(authConfig)
    ],
})

export class AppModule { }