Angular2-jwt: Error encountered resolving symbol values statically...

Created on 22 Dec 2016  ·  23Comments  ·  Source: auth0/angular2-jwt

I just upgraded angular-cli and angular and now I'm getting a compile error when running ng serve:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and
constants can be referenced because the value of this variable is needed by the template compiler
(position 79:22 in the original .ts file), resolving symbol AUTH_PROVIDERS in
/path/to/my/project/node_modules/angular2-jwt/angular2-jwt.d.ts, resolving symbol AppModule in
/path/to/my/project/src/app/app.module.ts, resolving symbol AppModule in
/path/to/my/project/src/app/app.module.ts

BTW, line 79 in angular2-jwt.d.ts reads:

export declare const AUTH_PROVIDERS: Provider[];

I'm using auth0-lock and followed the quickstart tutorial to get up and running.

Workaround 1

It turns out that I don't have any services explicitly using the AuthHttp class, so I just commented out the import { AUTH_PROVIDERS } from 'angular2-jwt'; and providers: [ AUTH_PROVIDERS ] lines from app.module.ts and this seems to fix the issue. Of course, then I have to manually set the Bearer jwt_token value in my Authorization header, but at least it works...

Workaround 2

If I use the alternative configuration approach with provideAuth, I don't get any errors. Here are the relevant bits from my app.module.ts file:

import { NgModule } from '@angular/core';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt';
import { AppComponent          } from './app.component';
// ... other import statements ...

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp( new AuthConfig({}), http, options);
}

@NgModule({
  declarations: [ AppComponent ],
  imports: [ HttpModule ],
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [ Http, RequestOptions ]
    }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Other Info

Here is my current system info:

~$ ng -v
angular-cli: 1.0.0-beta.24
node: 7.0.0
os: darwin x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

I'm using auth0-lock: 10.7.3, angular2-jwt: 0.1.27, and typescript v2.2.0-dev.20161218. Thanks for such great tools!!!

stale question
Source
picture morphatic
👍45 ❤11 🎉9

Most helpful comment

The snippet above is the way to do it for now until the angular2-jwt @NgModule is ready.

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp( new AuthConfig({}), http, options);
}

@NgModule({
  declarations: [ AppComponent ],
  imports: [ HttpModule ],
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [ Http, RequestOptions ]
    }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
picture chenkie on 12 Jan 2017
👍15 ❤4 🎉1

All 23 comments

Thanks for the info @morphatic, we're looking into that error now.

chenkie picture chenkie on 22 Dec 2016
👍10

I've got the same issue.

angular-cli: 1.0.0-beta.22-1
node: 6.9.2
os: win32 x64

@angular/common": "^2.2.3
@angular/compiler": "^2.2.3
@angular/core": "^2.2.3
@angular/forms": "^2.2.3
@angular/http": "^2.2.3
@angular/material": "^2.0.0-alpha.11-3
@angular/platform-browser": "^2.2.3
@angular/platform-browser-dynamic": "^2.2.3
@angular/router": "^3.2.3

angular2-jwt": "^0.1.26
auth0-lock": "^10.7.2

adonis1116 picture adonis1116 on 30 Dec 2016

I think this might be related to this issue.

thehashrocket picture thehashrocket on 31 Dec 2016

tks

nguyenminhtu picture nguyenminhtu on 31 Dec 2016

@chenkie any news on the update to rxjs 5.0x and compatibility with angular 2.4?

the-ult picture the-ult on 1 Jan 2017

I am encountering this same issue.

byteofsilicon picture byteofsilicon on 7 Jan 2017

Upgraded to Angular CLI to latest today. I get the same error.

bkarv picture bkarv on 8 Jan 2017

Here I have the same error.

"version": "1.0.0-beta.24"
"angular2-jwt": "^0.1.25"
jonigl picture jonigl on 12 Jan 2017

Try with the newly released 0.1.28. It resolves issues with rxjs versions. I ran the cli and didn't get any compile errors on the project when I ran it, but I don't think I've resolved AOT issues yet. I'm working on getting my large angular project upgraded to latest so I can make sure issues are resolved.

escardin picture escardin on 12 Jan 2017

Thanks @escardin I tried the version that you mentioned (0.1.28) but unfortunately I continue with the same error.
I am using the latest version of rxjs.
Now Im using:

"version": "1.0.0-beta.24"
"angular2-jwt": "^0.1.28"
"rxjs": "^5.0.3"

This is my current system info:

angular-cli: 1.0.0-beta.24
node: 6.9.4
os: darwin x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3
jonigl picture jonigl on 12 Jan 2017

Yep, 0.1.28 didn't fix the issue that lead to this error:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and
constants can be referenced because the value of this variable is needed by the template compiler
(position 79:22 in the original .ts file), resolving symbol AUTH_PROVIDERS in
/path/to/my/project/node_modules/angular2-jwt/angular2-jwt.d.ts, resolving symbol AppModule in
/path/to/my/project/src/app/app.module.ts, resolving symbol AppModule in
/path/to/my/project/src/app/app.module.ts

thehashrocket picture thehashrocket on 12 Jan 2017

Yeah you can't use AUTH_PROVIDERS with AOT afaik.

escardin picture escardin on 12 Jan 2017

The snippet above is the way to do it for now until the angular2-jwt @NgModule is ready.

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp( new AuthConfig({}), http, options);
}

@NgModule({
  declarations: [ AppComponent ],
  imports: [ HttpModule ],
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [ Http, RequestOptions ]
    }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
chenkie picture chenkie on 12 Jan 2017
👍15 ❤4 🎉1

Just FWIW, the problem with AUTH_PROVIDERS is not related (only) to AOT. Even with AOT disabled, angular-cli still does some static analysis, which gives the same error.

@chenkie Any idea when the mentioned @NgModule might be ready?

memark picture memark on 17 Jan 2017

It's there, you can try it. It's not documented because it's not tested. The additional output from running ngc isn't published either.

escardin picture escardin on 17 Jan 2017

I ran into this issue too. 

    "angular2-jwt": "^0.1.28"
    "angular-cli": "1.0.0-beta.25.5",

    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
idl-shaohua picture idl-shaohua on 18 Jan 2017

Thanks @chenkie you have saved my day

omarsallah00 picture omarsallah00 on 27 Jan 2017
👍1

I wanted to also comment that I was getting this issue as well using the angular-cli:

"devDependencies": {
    "@angular/cli": "1.0.0-beta.30",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }

and

"angular2-jwt": "^0.1.28"

Was resolved using @morphatic's solutions.

laterbreh picture laterbreh on 10 Feb 2017
👍1

Thank you. -_-

adonis1116 picture adonis1116 on 20 Feb 2017
👍1

Add me to the list.
I got it to work removing AUTH_PROVIDERS like @morphatic suggested, but I would love to have this fixed.

  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.2",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
Kunepro picture Kunepro on 23 Mar 2017

Thank you, @morphatic ! I was struggling with this issue for hours. I tried the Workaround 2 and it worked well.

vinicius picture vinicius on 21 Jun 2017

Same issue. Thank you @morphatic, Workaround 2 works great.

  "dependencies": {
    "@angular/core": "^4.2.4",
    "angular2-jwt": "^0.2.3",
    // ...
  },
  "devDependencies": {
    "@angular/cli": "1.4.1",
robertkoehler picture robertkoehler on 26 Sep 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️

stale[bot] picture stale[bot] on 26 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Eddman picture Eddman  ·  3Comments
ciesielskico picture ciesielskico  ·  5Comments
tekkudoc picture tekkudoc  ·  5Comments
UlyssesAlves picture UlyssesAlves  ·  5Comments
guillaume-skwid picture guillaume-skwid  ·  5Comments