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

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!!!

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 64
  • Comments: 23 (5 by maintainers)

Most upvoted comments

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 {}

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

Thank you. -_-

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.

Thanks @chenkie you have saved my day