node.js - JWT 库错误:通用类型“ModuleWithProviders”' 在 Angular 10 中需要 1 个类型参数
问题描述
对于我正在使用的身份验证项目:
Angular CLI: 11.0.4
对于前端
Node: 10.19.0
对于后端
OS: linux x64
之后我收到以下错误ng serve
,我不确定为什么会这样,错误似乎在库node_modules/angular2-jwt/angular2-jwt.d.ts中,而不是在我编写的代码中:
node_modules/angular2-jwt/angular2-jwt.d.ts:88:41 - 错误 TS2314:通用类型“ModuleWithProviders”需要 1 个类型参数。
静态 forRoot(config: AuthConfig): ModuleWithProviders;
也与此相关(所以我相信错误是并发的,甚至,恐怕是可互换的),因为它在显示'ModuleWithProviders<T>'
错误后立即显示,所以我认为显示它们是有意义的,因为它们链接在一起:
错误:node_modules/angular2-jwt/angular2-jwt.d.ts:1:77 - 错误 TS2307:找不到模块“@angular/http”或其相应的类型声明。
1 从“@angular/http”导入{ Http, Request, RequestOptions, RequestOptionsArgs, Response };
所以我遇到的困难也是由于我不确定代码的哪些部分受到影响,所以为了完整起见,我app.module.ts
将把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;
})
}
}
我对如何解决这个问题进行了研究,到目前为止我能找到: 这篇文章非常有用,因为它有我同样的问题。答案需要一个错误报告 repo,但是,它没有提供任何答案。提供的答案建议插入以下代码:
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
不幸的是,这不是一个公认的答案,我不确定我可以将这段代码放在我上面提供的app.module.ts的任何部分的什么位置。
我还研究了这篇文章,它也很有用,但没有使用上面的建议。我从错误中了解到的奇怪事实是它似乎来自库本身,而不是来自我编写的代码。
在此之后,我继续:
rm -rf
所有节点模块rm -rf
包杰森文件- 清理缓存
npm install
但结果是一样的,我总是在同一个库上收到同样的错误。请如果有人有同样的问题,你能分享它是如何解决的,我应该做些什么来解决这个问题。
解决方案
将这段代码插入到 angular2-jwt.d.ts 类中并确认类更改:
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
但是你应该使用比这个更新的库,比如@auth0/angular-jwt
安装这个库之后,你必须在类中注册它的模块app.module.ts
:
import {JwtModule} from '@auth0/angular-jwt'
imports: [
JwtModule.forRoot({
config: {
tokenGetter:() => {
return localStorage.getItem('access_token');
},
},
})
],
然后你可以在你的 AuthService 类中使用它:
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
) 的简短文档中进行了解释,因此在使用任何库之前不要懒惰地阅读它。
推荐阅读
- javascript - 当我将目的地设置为另存为 PDF 时,window.print() 不显示更多设置
- swift - 在模拟器上运行时出现链接器错误,可以在设备上运行,有人可以帮我解决这个问题吗?
- linux - 线程级并行 VS 进程级并行
- android - 隐形视图的触控能力
- javascript - 如何设计前端架构来处理 aem 中的多个品牌?
- java - Spring Boot 休息控制器未映射
- php - TYPO3 extbase 如何正确结束脚本
- android - Android Studio 3.3:Gradle Build Sync 消息是错误 FAILURE: Build failed with an exception
- java - 关机后重启log4j2
- tabulator - 如何使用语义 ui 样式?