NullInjectorError: No provider for JwtHelperService

Question

I'm in Angular 5.

First: npm install @auth0/angular-jwt --save

Then I import it: import { JwtHelperService } from '@auth0/angular-jwt';

This is my authentication service:

import { JwtHelperService } from '@auth0/angular-jwt';  @Injectable() export class AuthService {    constructor(public jwtHelper: JwtHelperService) { }    public isAuthenticated(): boolean {     console.log (localStorage['token']);     const token = localStorage.getItem('token');     // Check wheter the token is expired and return true or false     return !this.jwtHelper.isTokenExpired(token);   } } 

And this is my Guard service

export class GuardService implements CanActivate {    constructor(public auth: AuthService, public router: Router) {}    canActivate(): boolean {     if (!this.auth.isAuthenticated()){         console.log ('bye');         this.router.navigate(['/login']);         return false;     }     console.log ('Welcome');     return true;   }  } 

There is a token in the localstorage:

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImFjMTUyNzZhZjA2MjU1YTdlMDM0MmQ5ODg4N2M1ZmI2ZWNmM2RlNGUyNjhmYTc4MTliODRhOTVmMmJiNGZiMTliMDFkNjBhNWRlNjhlN2VlIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJhYzE1Mjc2YWYwNjI1NWE3ZTAzNDJkOTg4ODdjNWZiNmVjZjNkZTRlMjY4ZmE3ODE5Yjg0YTk1ZjJiYjRmYjE5YjAxZDYwYTVkZTY4ZTdlZSIsImlhdCI6MTUyMzI5NzkzNSwibmJmIjoxNTIzMjk3OTM1LCJleHAiOjE1MjMyOTgyMzUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.RNY2Yb9xiJDcER4rtHEAYMmoLyvPYij-upZc97q-mSgICKE6_xWih_IBjY4cHQXkkiRyCXaqCfwfMM4YWVjv7bsMlLN5bWlH0JTeYoYf2gENLBIG51NwGpU3iAl8KG_51ljZKbs3RE_ULDbphM1NG8BhobVQ5RlObWzejrkPcMHqlGJaMOMLQuXC1iBR2jI9tlfiP4RD4FUUsRkUEUJ5PSIRl34jWoTv31SSf1bkv43q3YeKTfk6pXZ5Ft_eV8G871KkmQSHANAn26A5ujj2FOh-uCV_VNJ97RuTQ6J4NP2YB-mMaWYpZ1xF-4ndqafRGFXJ_8euBO4cA36zvP3B7g 

And this is the error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AuthService -> JwtHelperService]:    StaticInjectorError(Platform: core)[AuthService -> JwtHelperService]:      NullInjectorError: No provider for JwtHelperService! Error: StaticInjectorError(AppModule)[AuthService -> JwtHelperService]:    StaticInjectorError(Platform: core)[AuthService -> JwtHelperService]:      NullInjectorError: No provider for JwtHelperService!     at _NullInjector.get (core.js:1002)     at resolveToken (core.js:1300)     at tryResolveToken (core.js:1242)     at StaticInjector.get (core.js:1110)     at resolveToken (core.js:1300)     at tryResolveToken (core.js:1242)     at StaticInjector.get (core.js:1110)     at resolveNgModuleDep (core.js:10854)     at _createClass (core.js:10891)     at _createProviderInstance$1 (core.js:10865)     at _NullInjector.get (core.js:1002)     at resolveToken (core.js:1300)     at tryResolveToken (core.js:1242)     at StaticInjector.get (core.js:1110)     at resolveToken (core.js:1300)     at tryResolveToken (core.js:1242)     at StaticInjector.get (core.js:1110)     at resolveNgModuleDep (core.js:10854)     at _createClass (core.js:10891)     at _createProviderInstance$1 (core.js:10865)     at resolvePromise (zone.js:814)     at resolvePromise (zone.js:771)     at eval (zone.js:873)     at ZoneDelegate.invokeTask (zone.js:421)     at Object.onInvokeTask (core.js:4740)     at ZoneDelegate.invokeTask (zone.js:420)     at Zone.runTask (zone.js:188)     at drainMicroTaskQueue (zone.js:595) 

Also, it shows me the route, but without the array from the service...

Answer 1

A little late to the party, but I ran into the same issue trying to follow the standalone docs and what it doesn't cover is the need to import the options InjectionToken which is referenced in the constructor of the service:

import { JwtHelperService, JWT_OPTIONS  } from '@auth0/angular-jwt';  ...  providers: [         { provide: JWT_OPTIONS, useValue: JWT_OPTIONS },         JwtHelperService     ] 

Answer 2

You need to use JwtModule provided by the @auth0/angular-jwt, which will add JwtHelperService to the providers, or you need to add it manually to the modules provider.

Something like

const JWT_Module_Options: JwtModuleOptions = {     config: {         tokenGetter: yourTokenGetter,         whitelistedDomains: yourWhitelistedDomains     } };  @NgModule({     imports: [         JwtModule.forRoot(JWT_Module_Options)     ], ... 

Fore more see Documentation