Angular 8 + @auth0/angular-jwt

[Inexad]

All my http bearer tokens (JWT) get removed after including: NgChatModule in my app.module.ts.

I'm using package @auth0/angular-jwt for handling my bearer tokens. It uses a http interceptor and add the token to http header. For some reason this bearer is lost if i import NgChatModule. If i remove NgChatModule it works as intended.

Is NgChatModule interfering with some http interception ?

[rpaschoal]

Hi @Inexad ,

ng-chat does use the HttpClientModule as part of its imports. It's mainly used to handle file uploads. Do you have the setting to enable file uploads on?

In terms of headers or possible interference I can't think of anything that could be causing such behavior. Have a look at this file as this is where ng-chat uses a HttpClient instance: https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/core/default-file-upload-adapter.ts

Perhaps it could be related to your adapter implementation?

[Inexad]

Hi @rpaschoal,

The ng-chat code i use is the example i found here:

https://github.com/rpaschoal/ng-chat-netcoreapp/tree/master/NgChatClient/ClientApp/src/app

The wierd thing is that if i remove all code related to the example and only import the module (No adapters, no components eg) i get the same behaviour.

I will try to reproduce this in a clean angular project.

Regards.

[Inexad]

Hi again,

I could reproduce the problem and it appears to be because of lazy-loading. Everything works as normal when not including "ngchatmodule" in the lazy loaded module. After loading it into lazy-loaded module the bearer token for some reason gets removed from authentication header.

When importing chat-component and ngchatmodule directly into app.module it works. But not into lazy loaded module.

Is there any way to get this working with Lazy Loaded modules?

I've tried to upload the files to a StackBlitz (not sure why its not working): https://stackblitz.com/edit/angular-vmj9zf

Regards.

[rpaschoal]

@Inexad this seems related: https://github.com/angular/angular/issues/20575

Some interesting read on this on another lib: https://github.com/dimpu/ngx-md/issues/159 and here a PR to address the issue on the same lib https://github.com/dimpu/ngx-md/pull/169

Long story short this seems to be by design on Angular and I am not too sure if we should remove the HttpClientModule registration from ng-chat as ng-chat does need it. All off the sudden if we remove it, it could break the usage for other people who might not have imported the HttpClientModule module on their main Angular application.

On your application is it a blocker to have the ng-chat module loaded up with the main application module?

[Inexad]

@rpaschoal I think removing the HttpClientModule would not be a good idea. If i understand this correct, the Angular handling these issues with the "forRoot()" and "forChild()" methods? Is it possible to implement forRoot() in ngchat?

Sadly it is a problem. The application is quite big and i'm trying to keep the different bundles down by lazy loading.

[rpaschoal]

I see @Inexad , would you be keen on creating a fork of ng-chat and giving forRoot a shot? If that works all good we could release a patch with the changes.

[Inexad]

Sorry for late reply @rpaschoal . Yes, that is maybe something i can do. I will have a look at it when i got some time over.

[rejahrehim]

Stuck with the same issue. Waiting for the patch.

[rpaschoal]

I'm running short on time these days but will be looking closely if @Inexad gets to push a fixing patch for it via a pull request.

[shakthi-manai]

Hello, I am having an issue using ng-chat in angular 8 based application . The error is given below. ng-chat.js:477 ng-chat component couldn't be bootstrapped. ng-chat.js:485 An exception has occurred while initializing ng-chat. Details: Cannot read property 'pipe' of undefined TypeError: Cannot read property 'pipe' of undefined at NgChat.fetchFriendsList (ng-chat.js:555) at NgChat.activateFriendListFetch (ng-chat.js:503) at NgChat.bootstrapChat (ng-chat.js:463) at NgChat.ngOnInit (ng-chat.js:421) at checkAndUpdateDirectiveInline (core.js:31909) at checkAndUpdateNodeInline (core.js:44366) at checkAndUpdateNode (core.js:44305) at debugCheckAndUpdateNode (core.js:45327) at debugCheckDirectivesFn (core.js:45270) at Object.eval [as updateDirectives] (DashboardComponent.html:61).

Any help would be appreciated. Thanks in advance

[rpaschoal]

With the package now running on Angular 9, could any of you confirm this is still an issue? @Inexad @rejahrehim

[Theinfinix500]

we are facing the same issue. the ngchatModule resets the interceptor configuration. we will appreciate if you could remove the HttpClientModule from the imports of the library and let the developers add it to there modules.