typescript NullInjectorError: 没有 JwtHelperService 的提供者
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49739277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NullInjectorError: No provider for JwtHelperService
提问by ValRob
I'm in Angular 5.
我在 Angular 5。
First: npm install @auth0/angular-jwt --save
第一的： npm install @auth0/angular-jwt --save
Then I import it: import { JwtHelperService } from '@auth0/angular-jwt';
然后我导入它： 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
这是我的 Guard 服务
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:
localstorage中有一个token：
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 (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 (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)
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 (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 (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...
此外，它向我展示了路线，但没有来自服务的数组......
采纳答案by Suren Srapyan
You need to use JwtModuleprovided by the @auth0/angular-jwt, which will add JwtHelperServiceto the providers, or you need to add it manually to the modules provider.
您需要使用JwtModule由 提供的@auth0/angular-jwt，这将添加JwtHelperService到提供程序，或者您需要手动将其添加到模块提供程序。
Something like
就像是
const JWT_Module_Options: JwtModuleOptions = {
config: {
tokenGetter: yourTokenGetter,
whitelistedDomains: yourWhitelistedDomains
}
};
@NgModule({
imports: [
JwtModule.forRoot(JWT_Module_Options)
],
...
Fore more see Documentation
更多信息请参见文档
回答by elDuderino
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:
聚会有点晚了，但我在尝试遵循独立文档时遇到了同样的问题，它没有涵盖的是需要导入服务构造函数中引用的选项 InjectionToken：
import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
...
providers: [
{ provide: JWT_OPTIONS, useValue: JWT_OPTIONS },
JwtHelperService
]
回答by Pingu510
For future reference, if all you want to use JwtHelperfor is decoding, like in this case checking if the token is expired, then you can use this.
为了将来参考，如果您想要使用JwtHelper的只是解码，例如在这种情况下检查令牌是否已过期，那么您可以使用它。
import { JwtHelperService } from '@auth0/angular-jwt';
const jwtHelper = new JwtHelperService();
@Injectable()
export class AuthService {
public isAuthenticated(): boolean {
const token = localStorage.getItem('token');
// Check if the token is expired and return true or false
return !this.jwtHelper.isTokenExpired(token);
}
Source: Documentation
来源：文档
回答by Abdessamad
I fixed this issues by changing my import from :
我通过更改我的导入来解决这个问题：
import { JwtHelperService } from '@auth0/angular-jwt';
to
到
import { JwtHelperService } from '@auth0/angular-jwt/src/jwthelper.service';
