Angular2-jwt: [[email protected]] Upgrade to angular rc5 failure

[jspizziri]

I upgraded to rc5 this morning, and all authHttp.[request] methods hang. No errors are thrown.

[chenkie]

Looking into it

[rema7]

If you try to configure like this:

@NgModule({
    declarations: [AppComponent],
    imports:      [BrowserModule,
        RouterModule.forRoot(routes),
        HttpModule
    ],
    bootstrap:    [AppComponent],
    providers: [
        {provide: AuthHttp,
            useFactory: (http) => {
                return new AuthHttp(new AuthConfig({
                    globalHeaders: [{'Content-Type':'application/json'}],
                    noJwtError: true,
                }), http);
            },
            deps: [Http]
        },
        {provide: HttpClient, useFactory:(http,router) => new HttpClient(http, router), deps:[AuthHttp, Router]}
    ]
})

You will got exception: EXCEPTION: TypeError: Cannot read property 'toString' of null

With AUTH_PROVIDERS everything is ok

[rema7]

the problem was when I try to pass headers to AuthHttp methods. With rc4 it's works, with rc5 on

[uNki23]

exactly the same problem with angular2-jwt 0.1.18 and angular 2.0.0-rc.5

[vapits]

Did anyone found a solution on this?

My providers in @ngModule looks like this:

providers: [
    appRouterProviders,
    provide(AuthHttp, {
      useFactory: (http) => {
        return new AuthHttp(new AuthConfig({
          headerName: 'Authorization',
          headerPrefix: 'Bearer',
          tokenName: 'token',
          tokenGetter: (() => localStorage.getItem('token')),
          globalHeaders: [{'Content-Type': 'application/json'}],
          noJwtError: false,
          noTokenScheme: false
        }), http);
      },
      deps: [Http]
    })
  ]

And I'm getting:

Cannot read property 'toString' of null

In all requests with RC5 of course.

[RichardGrundy]

Just to confirm, I am seeing this too but it is related to

globalHeaders: [{'Content-Type': 'application/json'}],

removing this from the provide() function fixes the issue.

[vapits]

@RichardGrundy that's solved it for me.

[RichardGrundy]

But now this leaves me with a need to add global headers another way :-(

[vapits]

Yes you are right but for some reason for me now everything work. In my RC4 version without this head I did had issues but now it just works. Strange.

It's an issue though in angular repo:
https://github.com/angular/angular/issues/10612

[sharpmachine]

I'm having the same issue. Removing globalHeaders works as well, but yeah, now we have to pass those in differently.

[escardin]

Write a wrapper around authHttp, similarly to how it wraps http. Since you don't have to deal with a case as general as authHttp does, it should be pretty simple. When angular2-jwt gets to fixing the issues with global headers, you can remove the code adding the headers from your wrapper (i.e. you should be using a wrapper anyway)

[jspizziri]

@chenkie, any ETA on a fix?

[uNki23]

i'm afraid that this is a general 'headers' related problem and is not limited to the provide() function context.

i've put some http requests directly inside one of my components just for testing purposes.

this fails (toString error...):

const contentHeaders = new Headers();
contentHeaders.append('Content-Type', 'application/json');
this.authHttp
.get('/api/v1/core/settings', { headers: contentHeaders })
.map(responseData => responseData.json())
.subscribe(
res => { console.log(res) },
err => { console.log(err) }
)

this works (leaving out the object with the headers property):

this.authHttp
.get('/api/v1/core/settings')
.map(responseData => responseData.json())
.subscribe(
res => { console.log(res) },
err => { console.log(err) }
)

EDIT: did not see @vapits 's edited comment - it's angular related :/

so this works, too, as temporary fix:

const contentHeaders = new Headers();
contentHeaders.append('Content-Type', 'application/json');
this.authHttp
.get('/api/v1/core/settings', { headers: contentHeaders, body: '' })
.map(responseData => responseData.json())
.subscribe(
res => { console.log(res) },
err => { console.log(err) }
)

[escardin]

Does it work if you cut out authHttp and use Http directly?

[uNki23]

not for GET requests. POST works.

[achimha]

I worked around this RC5 bug by modifying angular2-jwt.js's request method to set the private body element. I also changed the call to http.request to include the options argument that was previously ignored.

if (req._body === undefined || req._body === null)
    req._body = "";
 return this.http.request(req, options);

[vapits]

@achimha It would be great if you create a PR. I guess @chenkie can review and accept it so everyone can get it with a new release.
Otherwise I can do it for you but you did it already so it belongs to you ;)

[achimha]

I don't think it's a good solution so I'm hesitant to supply a PR. Also the whole request options handling in angular2-jwt is broken, it should work like in Angular's Http class but there is already another ticket for that.

PR: https://github.com/auth0/angular2-jwt/pull/127

[charsleysa]

Fixed by #132.
Please update if issues still occur.

[sharpmachine]

I installed the latest this morning. So far everything is working perfectly again. Thanks.

[kjartanvalur]

Does anyone know about example project with Angular2 rc5 with routing and Auth0 ?

[macliems]

I would very much like to see such an example project too!!!

[chenkie]

We've got our official examples in the works and they should be ready today or tomorrow. In the meantime, check out the TOH fork which works with RC6: https://github.com/auth0-blog/angular2-tour-of-heroes