ngx-sharebuttons: Problem with import of HttpClientModule overwriting interceptors

I’m submitting a … (check one with “x”)

[x] bug report => search for a similar issue before submitting
[ ] feature request
[ ] question

Versions

@angular/cli: 1.4.7
node: 8.7.0
os: darwin x64
@angular/animations: 5.0.0-rc.2
@angular/common: 5.0.0-rc.2
@angular/compiler: 5.0.0-rc.2
@angular/core: 5.0.0-rc.2
@angular/forms: 5.0.0-rc.2
@angular/http: 5.0.0-rc.2
@angular/platform-browser: 5.0.0-rc.2
@angular/platform-browser-dynamic: 5.0.0-rc.2
@angular/platform-server: 5.0.0-rc.2
@angular/router: 5.0.0-rc.2
@angular/cli: 1.4.7
@angular/compiler-cli: 5.0.0-rc.2
@angular/language-service: 5.0.0-rc.2
typescript: 2.5.3

Repro steps

import ShareDirectiveModule in a module (I’ve only seen it in a lazy-loaded module, but I don’t think it is required), when HTTP_INTERCEPTORS are provided at a higher level (for example, in the root app module).

The Issue

The ShareDirectiveModule imports HttpClientModule. According to the angular docs, the HttpClientModule need only be imported once, in the root of the App. One consequence of re-importing the HttpClientModule is that HTTP_INTERCEPTORS are essentially reset both in the ShareDirectiveModule (which isn’t a problem) and for the module which imports the ShareDirectiveModule.

In my App, for example, I found that all of the HttpRequests that were initiated in the module that also imported your module (but nothing at a higher level) ran without my interceptors.

I’m not sure if this is the intended behavior for angular, or if it is an angular bug, but there might be an easy fix: instead of having ShareDirectiveModule import HttpClientModule, amend the docs to have users import HttpClientModule when they import the forRoot() for your module. You may want to do the same with the HttpClientJsonpModule, which adds an interceptor–I’m not sure if it is necessary, though.

Of course, that means that all of your requests will also pass through my interceptor, but it is my responsibility to write the interceptors in a way that doesn’t cause problems for your requests.

Obviously, this is a breaking change, but as the package is written now, it is a problem for users who rely on HTTP_INTERCEPTORS.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 31 (9 by maintainers)

Most upvoted comments

@karptonite HttpClientModule is removed now @naveedahmed1 HttpClientJsonpModule is optional now, you only need it for linkedIn and tumblr count

HttpClientModule, // required
HttpClientJsonpModule, // optional
ShareButtonsModule.forRoot()

That’s right! I opened an issue for this #297

Yeah, of course that is how we should write interceptors. I’m just saying that having a user’s interceptors breaking the package (if they are not well written, or do something unexpected) could be a confusing source of bugs. But again, much better than messing with the interceptors themselves.

@karptonite @naveedahmed1 Alright, but I need some time to investigate about this

Fixed, this was real quick , great job bro!

I just found this:

https://github.com/MurhafSousli/ngx-sharebuttons/blob/master/projects/buttons/src/lib/share-buttons.module.ts

Its importing HttpClientModule , may be its causing the issue.

Great! Thank you so much @MurhafSousli 😃

Thanks! A definite improvement!

That doesn’t entirely solve the problem. HttpClientJsonpModule will now be adding an interceptor to the main application’s HttpClient, unless you remove that as well.

@naveedahmed1 Alright, let’s remove it

@naveedahmed1 @MurhafSousli Yes, I think this issue should be reopened. Importing HttpClientModule in each lazy loaded module is contrary to its intended use, and not an appropriate solution to this problem. The whole point of the CoreModule is that it handles providers (and modules that handle providers) that need only be imported once. See https://angular.io/guide/http#setup-installing-the-module

This is something that you can solve by having the user pass a HttpClient instance as done here, https://github.com/ngx-translate/http-loader, or find a way to create inject an isolated instance of HttpClient with its own InjectionToken (I think that would be preferable).

However, I wouldn’t suggest that asking users to import HttpModule as a solution–HttpModule is deprecated, I believe.

The issue still persists, this approach results in multiple instances of the HttpClient. I think it can only be resolved if you make this plugin independent of HttpClient i.e. neither import HttpClientModule nor add HttpClient to providers list in your plugin. In documentation ask users to import HttpModule in their root module.