JWT库错误:通用类型'ModuleWithProviders< T>'在Angular 10中需要1个类型参数 [英] JWT library error: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s) in Angular 10
问题描述
我正在使用的身份验证项目:
For an authentication project I am using:
Angular CLI:11.0.4 用于前端
节点:后端的10.19.0
操作系统:linux x64
在 ng服务后收到以下错误，但我不确定为什么会发生此错误，该错误似乎在库 node_modules/angular2-jwt/angular2-jwt.d中.ts ，而不是在我编写的代码中:
I receive the following error after ng serve and I am not sure why that is happening, the error seems to be in the library node_modules/angular2-jwt/angular2-jwt.d.ts and not in the code I wrote:
node_modules/angular2-jwt/angular2-jwt.d.ts:88:41-错误TS2314:通用类型'ModuleWithProviders'需要1个类型参数.
node_modules/angular2-jwt/angular2-jwt.d.ts:88:41 - error TS2314: Generic type 'ModuleWithProviders' requires 1 type argument(s).
静态forRoot(config:AuthConfig):ModuleWithProviders;
static forRoot(config: AuthConfig): ModuleWithProviders;
也与此相关(因此，我认为错误是并发的，甚至恐怕是可以互换的)，因为它是在显示'ModuleWithProviders< T>'错误后立即显示的，因此，尽管将它们链接在一起，将它们都显示出来是很有意义的:
Also connected to that (so I believe the errors are concurrent or even, I am afraid, interchangeable), because it was shown as soon as the 'ModuleWithProviders<T>' error was shown, so I though it would make sense to show them both as they are linked together:
错误:node_modules/angular2-jwt/angular2-jwt.d.ts:1:77-错误TS2307:找不到模块"@ angular/http"或其对应的类型声明.
Error: node_modules/angular2-jwt/angular2-jwt.d.ts:1:77 - error TS2307: Cannot find module '@angular/http' or its corresponding type declarations.
1 import {Http，Request，RequestOptions，RequestOptionsArgs，响应}来自"@ angular/http";
1 import { Http, Request, RequestOptions, RequestOptionsArgs, Response } from "@angular/http";
所以我遇到的困难也是由于我不确定代码的哪些部分受到影响，因此为了完整起见，我将放置 app.module.ts 和带有 jwt的文件包括
So the difficulty I have is also due to the fact that I am not sure which parts of the code are affected so I will put for the sake of completeness the app.module.ts and the files carrying the jwt include
app.module.ts :
import { ValidateService } from './services/validate.service';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { HttpClientModule } from '@angular/common/http';
import { AuthService } from './services/auth.service';
import { AuthGuard } from './guards/auth.guards';
const appRoutes: Routes = [
{path:'', component: HomeComponent},
{path:'register', component: RegisterComponent},
{path:'login', component: LoginComponent},
{path:'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
{path:'profile', component: ProfileComponent, canActivate: [AuthGuard]},
]
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
RegisterComponent,
HomeComponent,
DashboardComponent,
ProfileComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
RouterModule.forRoot(appRoutes),
FlashMessagesModule.forRoot(),
HttpClientModule,
],
providers: [ValidateService, AuthService, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { tokenNotExpired } from 'angular2-jwt';
@Injectable({
providedIn: 'root'
})
export class AuthService {
authToken: any;
user: any;
constructor(private httpClient: HttpClient) { }
registerUser(user) {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
return this.httpClient.post('http://localhost:3000/users/register', user, httpOptions);
}
authenticateUser(user) {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
return this.httpClient.post('http://localhost:3000/users/authenticate', user, httpOptions);
}
getProfile() {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: this.authToken,
})
};
this.loadToken();
return this.httpClient.get('http://localhost:3000/users/profile', httpOptions);
}
storeUserData(token, user) {
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}
loadToken() {
const token = localStorage.getItem('id_token');
this.authToken = token;
}
loggedIn() {
return tokenNotExpired();
}
logout() {
this.authToken = null;
this.user = null;
localStorage.clear();
}
}
profile.components.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
user: Object = {};
constructor(private authService: AuthService, private router: Router) { }
ngOnInit(): void {
this.authService.getProfile().subscribe(profile => {
this.user = profile;
},
err => {
console.log(err);
return false;
})
}
}
我做了关于如何解决问题的研究，这是到目前为止我能找到的:这篇文章非常有用，因为它有我同样的问题.答案要求使用错误报告存储库，但是，不会提供任何答案.提供的答案建议插入以下代码:
I did research on how to solve the problem and here is was I was able to find so far: this post is very useful because it has my same exact problem. The answer calls for a bug report repo that, however, does not provide any answer to that. The answer that was provided suggests to insert the following code:
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
不幸的是，这不是一个可以接受的答案，而且我不确定我可以在上面提供的 app.module.ts 的任何部分中放置这段代码.
Unfortunately this was not an accepted answer and I am not sure where I can put this piece of code in any part of the app.module.ts I provided above.
我还研究了此帖子，该帖子也很有用但没有使用上面的建议.我从错误中了解到的一个奇怪事实是，它似乎来自库本身，而不是我编写的代码.
I also studied this post which was also useful but did not use the suggestion above. The strange fact I understand from the error is that it seems to come from the library itself and not from the code that I wrote.
在此之后，我继续进行:
Following this I proceeded with:
-
rm -rf所有node_modules -
rm -rf包jason文件 - 清理缓存
-
npm install
rm -rfall the node_modulesrm -rfthe package jason file- clean the cache
npm install
但是结果是一样的，我总是在同一个库中收到相同的错误.如果有人遇到同样的问题，请您分享一下解决的方法，以及我应该做些什么来解决这个问题.
But outcome is the same, I always receive the same error on the same library. Please if anyone had the same problem can you share how it was solved and what should I do more to take care of that.
推荐答案
将这段代码插入angular2-jwt.d.ts类并确认类更改:
Insert this piece of code into the angular2-jwt.d.ts class and confirm the class change:
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
但是您应该使用比此更新的库，例如 @ auth0/angular-jwt 安装此库后，必须在 app.module.ts 类别中注册其模块:
But you should use a newer library than this, like @auth0/angular-jwt
After installing this library, you must register its module in the class app.module.ts :
import {JwtModule} from '@auth0/angular-jwt'
imports: [
JwtModule.forRoot({
config: {
tokenGetter:() => {
return localStorage.getItem('access_token');
},
},
})
],
然后您可以在AuthService类中使用它:
And then you can use it in your AuthService class:
import {JwtHelperService} from '@auth0/angular-jwt';
constructor(public jwtHelper: JwtHelperService) {
}
isAuthenticated(): boolean {
return !this.jwtHelper.isTokenExpired(this.token);
}
所有这些都在带有示例的简短文档中进行了说明( https://www.npmjs.com/package/@auth0/angular-jwt )，因此请不要懒于阅读它.在使用任何库之前.
All this is explained in a short documentation with examples (https://www.npmjs.com/package/@auth0/angular-jwt), so don't be lazy to read it before using any library.
这篇关于JWT库错误:通用类型'ModuleWithProviders< T>'在Angular 10中需要1个类型参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
