After the migration of my app from Angular 4^ to Angular 6 (newest version) I got a very weird error in my Auth service.
Specific, the angular2-jwt package is causing a killer error when I try to "serve" or "build" the app in production environment. In the other hand, the same code runs perfectly well on "dev" environment.
OS -> MacOS 10.13.6
The error I got when execute 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)
Here follows some code:
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 (main part of the code)
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));
}
);
}
