web-dev-qa-db-ja.com

Angular 6 angular2-jwtを使用して

アプリをAngular 4 ^からAngular 6（最新バージョン））に移行した後、Authサービスで非常に奇妙なエラーが発生しました。

特定、 angular2-jwtproduction環境でアプリを"serve"または"build"しようとすると、パッケージが原因でキラーエラーが発生します。一方、同じコードは"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$$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)

次にいくつかのコードを示します。

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));
            }
        );
}
angularangular6angular2-jwt
4
Paulo Tokarski Glinski

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

注：このライブラリは現在バージョン2で、npmで@ auth0/angular-jwtとして公開されています。このライブラリのv1.0より前のバージョンを探している場合は、v1.0より前のブランチとnpmでangular2-jwtとして見つけることができます。 @ auth0/angular-jwt v2はAngular v6 +およびRxJS v6 +で使用します。Angular v4.3からv5 +の場合は、@ auth0/angular-を使用しますjwt v1

Angular v6 +で使用するには、@ auth0/angular-jwtをインストールする必要があります

12
xeofus