Angular 6 using angular2-jwt

Question

在我的应用程序从 Angular 4^ 迁移到 Angular 6(最新版本(后，我的身份验证服务中出现了一个非常奇怪的错误。

具体来说，当我尝试production环境中"serve"或"build"应用程序时，angular2-jwt包会导致致命错误。另一方面，相同的代码在"dev"环境中运行良好。

操作系统 -> MacOS 10.13.6

执行时得到的错误ng serve --configuration production：

ERROR in : Error: Internal error: unknown identifier [{"filePath":"/Users/paulo/Projects/eleo-usuario/node_modules/angular2-jwt/angular2-jwt.d.ts","name":"AuthHttp","members":[]},{"filePath":"/Users/paulo/Projects/eleo-usuario/node_modules/@angular/common/common.d.ts","name":"LocationStrategy","members":[]}]
at Object.importExpr$$1 [as importExpr] (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21757:27)
at tokenExpr (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11810:43)
at providerDef (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11736:24)
at /Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11906:81
at Array.map (<anonymous>)
at NgModuleCompiler.compile (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11906:48)
at AotCompiler._compileModule (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21702:36)
at /Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21621:70
at Array.forEach (<anonymous>)
at AotCompiler._compileImplFile (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21621:23)
at /Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21611:74
at Array.map (<anonymous>)
at AotCompiler.emitAllImpls (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21611:39)
at AngularCompilerProgram.generateFilesForEmit (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler-cli/src/transformers/program.js:736:46)
at AngularCompilerProgram._emitRender2 (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler-cli/src/transformers/program.js:330:27)
at AngularCompilerProgram.emit (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler-cli/src/transformers/program.js:236:22)

下面是一些代码：

包.json

{
"name": "eleo-usuario",
"version": "0.2.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"doc": "./node_modules/.bin/compodoc -p tsconfig.json --serve --port 4100 --theme postmark"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.6",
"@angular/cli": "^6.1.5",
"@angular/common": "^6.1.6",
"@angular/compiler": "^6.1.6",
"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",
"@angular/http": "^6.1.6",
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/router": "^6.1.6",
"@auth0/angular-jwt": "^2.0.0",
"angular2-jwt": "^0.2.3",
"angular2-materialize": "^15.0.4",
"angular2-text-mask": "^9.0.0",
"chart.js": "^2.7.2",
"core-js": "^2.5.7",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"materialize-css": "^0.100.2",
"ng2-charts": "^1.6.0",
"ng2-file-upload": "^1.3.0",
"npm": "^6.4.1",
"rxjs": "^6.3.1",
"rxjs-compat": "^6.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.7.5",
"@angular/compiler-cli": "^6.1.6",
"@angular/language-service": "^6.1.6",
"@types/jasmine": "2.8.8",
"@types/node": "^10.9.4",
"codelyzer": "~4.4.4",
"compodoc": "0.0.41",
"jasmine-core": "~3.2.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.2",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.3.1",
"protractor": "^5.4.0",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"typescript": "^2.9.2"
}
}

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { VersoesComponent } from './components/versoes/versoes.component';
import { TutorialComponent } from    './components/tutorial/tutorial.component';
import { FooterPartialComponent } from './partials/footer/footer.partial';
import { SidenavPartialComponent } from './partials/side/sidenav.partial';
import { SharedModule } from './share.module';
import { AuthGuard } from './auth/auth.guard';
import { AuthService } from './services/auth.service';
import { ApiService } from './services/api.service';
import { RootModule } from './components/root/root.module';
import { ClubesModule } from './components/clubes/clubes.module';
import { DistritosModule } from './components/distritos/distritos.module';
import { Router, appRoutingProviders } from './app.routing';
export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig({
tokenName: 'token', tokenGetter: (() => sessionStorage.getItem('token')), globalHeaders: [{'Content-Type': 'application/json'}],
}), http, options);
}
@NgModule({
declarations: [
AppComponent,
LoginComponent,
VersoesComponent,
TutorialComponent,
FooterPartialComponent,
SidenavPartialComponent
],
imports: [
HttpModule,
BrowserModule,
SharedModule,
RootModule,
ClubesModule,
DistritosModule,
RouterModule.forRoot(Router, { useHash: true })
],
providers: [
AuthGuard,
ApiService,
AuthService,
appRoutingProviders,
{
provide: [AuthHttp, LocationStrategy],
useClass: HashLocationStrategy,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions],
}
],
bootstrap: [AppComponent]
})
export class AppModule { }

auth.service.ts(代码的主要部分(

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from './api.service';
import { JwtHelper } from 'angular2-jwt';
import 'rxjs/add/operator/filter';
import { Usuario } from '../models/Usuario';
@Injectable()
export class AuthService {
private jwtHelper: JwtHelper = new JwtHelper();
constructor(protected router: Router, protected api: ApiService) { }
public login(model: any): any {
return new Promise((resolve, reject) => {
this.api.login(model)
.subscribe(res => {
if (!res.msg) {
this.setSession(res);
}
resolve(res);
}, err => console.error(err));
}
);
}

Answer 1

https://github.com/auth0/angular2-jwt

注意：此库现在版本为 2，并在 npm 上发布为 @auth0/棱角分明的JWT。如果您正在寻找此版本 v1.0 之前的版本 库，它可以在 v1.0 之前的分支和 npm 上找到 角度2-JWT.@auth0/angular-jwt v2 将与 Angular v6+ 一起使用，并且 RxJS v6+.对于 Angular v4.3 到 v5+，请使用 @auth0/angular-jwt v1

您需要安装 @auth0/Angular-JWT 才能与 Angular v6+ 一起使用

Answer 2

您需要安装 JWT(JSON Web Token( ">

@auth0/angular-jwt"： "^3.0.1" 包。 一旦你安装了JWT(JSON Web Token(包工作正常。

ERROR in src/app/vendor-redirect/vendor-redirect.component.ts(4,34): error TS2307: Cannot find module '@auth0/angular-jwt'.
"dependencies": {
"@auth0/angular-jwt": "^3.0.1"
}
admin/vendor$ npm install
admin/vendor$ npm start