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

[chenkie]

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]

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