Angular2-jwt: AUTH_PROVIDERS

[dchinn]

Using angular 2, and the angular command line interface.

Per the instructions, in app.module.ts, I imported

import { AUTH_PROVIDERS } from 'angular2-jwt';

and down below, in providers:

providers: [AUTH_PROVIDERS]

But, when i try to serve the application ('ng serve'), I get the following 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 [MYPROJECT]/node_modules/angular2-jwt/angular2-jwt.d.ts, resolving symbol AppModule in [MYPROJECT]/src/app/app.module.ts, resolving symbol AppModule in [MYPROJECT]/src/app/app.module.ts

"line 79:220 in the original .ts file" seems to point to angular2-jwt.d.ts, and i see that the line is declaring constant AUTH_PROVIDERS: Provider[]). I'm not very good at javascript; is this supposed to be initialized to someting?

thanks in advance

[chenkie]

The readme needs to be updated to remove those instructions. Can you try with a factory function?

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: 'token',
          tokenGetter: (() => localStorage.getItem('token')),
          globalHeaders: [{'Content-Type':'application/json'}],
     }), http, options);
}

@NgModule({
  // ...

  providers: [
    // ...
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [Http, RequestOptions]
    }
  ]
})

[stefandb]

Thank you @chenkie. Your solution works

[JimiC]

@chenkie You are a life saver. Exactly the solution I was looking for.

[JimiC]

@kartikgreen

 export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: 'token',
          tokenGetter: (() => localStorage.getItem('token')),
          globalHeaders: [{'Content-Type':'application/json'}],
     }), http, options);
}

Following standard coding guidelines this should go in its own file (i.e. authHttpServiceFactory.ts)

You then reference it in app.module.ts and you modify the @NgModule section accordingly.

[JimiC]

@kartikgreen Usage of class comes down to personal preference. Some use them, some don't. Experience will let you know when and where to use it.

In NgModule you add the related code snippet in providers.

[JimiC]

The snippets purpose is to replace AUTH_PROVIDERS usage.

[escardin]

@dchinn Did this resolve your problem? Please reopen if not.

[EdwardMCastrillon]

@chenkie Your solution does'nt works fine for me. When i trying to use a factory function i get the follow error:

Error: Error encountered resolving symbol values statically. Calling function ‘omakeDecorator’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function