Angular 6 使用 angular2-jwt

Question

将我的应用程序从 Angular 4^ 迁移到 Angular 6（最新版本）后，我的 Auth 服务出现了一个非常奇怪的错误。

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

OS -> 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$ [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)

下面是一些代码：

package.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

NOTE: This library is now at version 2 and is published on npm as @auth0/angular-jwt. If you're looking for the pre-v1.0 version of this library, it can be found in the pre-v1.0 branch and on npm as angular2-jwt. @auth0/angular-jwt v2 is to be used with Angular v6+ and RxJS v6+. For Angular v4.3 to v5+, use @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

Angular 6 使用 angular2-jwt

Angular 6 using angular2-jwt

angular2-jwt

angular

angular6