Extend http interceptors in child module injector

[miguel-leon]

🚀 feature request

Relevant Package

This feature request is for @angular/common/http

Description

Ability to extend http interceptors in child module injectors since it is fairly simple, but the api to achieve it is "private" in angular.

Describe the solution you'd like

I've already managed to do this by providing HttpHandler, HttpClient and HTTP_INTERCEPTORS manually in the lazy loaded module without importing HttpClientModule, since this module imports HttpClientXsrfModule which provides a fresh HTTP_INTERCEPTORS array, for the sake of reincluding HttpXsrfInterceptor (imho, but why again?).

If this explanation was hard to follow, here's the code

@NgModule({
	providers: [{
		provide: HttpClient,
		useClass: HttpClient
	}, {
		provide: HttpHandler,
		useClass: ɵHttpInterceptingHandler
	}, {
		provide: HTTP_INTERCEPTORS,
		deps: [Injector],
		useFactory: injector => [
			...ARRAY_OF_CHILDREN_INTERCEPTOR,
			...injector.parent.get(HTTP_INTERCEPTORS)
		]
	}]
})
export class FeatureModule {}

Here the "private" angular api is the class ɵHttpInterceptingHandler and the injector.parent part.

So, I think the most practical solution would be to maybe have an alternative HttpClientModule that does not import HttpClientXsrfModule so the interceptors array is not reset.

Or similarly, have both these modules without providers and have .forRoot(): ModuleWithProviders options for each, of which HttpClientModule.forRoot() would spread HttpClientXsrfModule.forRoot()'s providers.

Code again, if explanation was convoluted

class HttpClientModule {
	static forRoot(): ModuleWithProviders<HttpClientModule> {
		return {
			ngModule: HttpClientModule,
			providers: [
				// taken from source code as of version 9
				HttpClient,
				{provide: HttpHandler, useClass: HttpInterceptingHandler},
				HttpXhrBackend,
				{provide: HttpBackend, useExisting: HttpXhrBackend},
				BrowserXhr,
				{provide: XhrFactory, useExisting: BrowserXhr},

				// HttpClientXsrfModule providers
				...HttpClientXsrfModule.forRoot().providers
			]
		}
	}
}

Describe alternatives you've considered

Other, perhaps more suitable or powerful solutions, are definitely more difficult to implement.

One might be to extend capabilities of multi interceptors (or add another multi special type) to be able to extend themselves with the array of the parent injector.

Lastly, in another train of thought, this problem may delve a little into the "problem" that ModuleWithProviders doesn't solve thoroughly, being that provider inclusion is not completely controlled if the module in question imports another module that provides something. And even if the second module has a static ModuleWithProviders method for the same argument, you can't (not in a conventional manner) control which module version to import from within these methods.

i.e. ModuleWithProviders can't solve providers in deeper module imports with its intended design.
Hence, the most complicated solution would be to redesign this.

These are a lot less practical solutions, but since there's the section, I might as well mention them.

[alxhub]

I would love to see some sort of lazy-loading of interceptors. Thanks for the design proposals! I'm tagging this as a use-case request to allow for discussion.

I feel like for simplicity's sake, rather than having different injectors (created by lazy loading different modules via the router) with different sets of interceptors, a design for this should be based around 2 rules:

1. There is only ever one set of interceptors applied to all requests made by the application.
2. It's possible to add interceptors into this mix on-demand, including ones which are lazily loaded.

[miguel-leon]

Hi, thanks for the comment!

I realize now that I didn't specify whether I meant "extending interceptors" as in enlarging the main set of interceptors or as in having different sets of interceptors. I guess modifying the provider in my example a little would allow both cases.

But actually I meant neither (and both?). What I meant was for children module (lazy loaded) injectors to have its own set of interceptors but also benefit from the main ones (a hierarchy).

This was actually the use case in my project. I wanted my child module to apply the application wide interceptors, but also its own "private" set of interceptors. And in retrospective, I don't know if it would have been all OK if this child module would have updated the main set of interceptors. Also the child module was a library (yes, a lazy loaded module in a library with Ivy).

In summary, I think both your set of rules and my use case can be achieved. But I wouldn't want to see this feature restricted to only one way. I rather it to not change.

In any case, both ways have the same (lack of) difficulty to implement, and IMHO, I don't see only one set of interceptors as a superior design, both designs have their pros and cons.

I hope I clarified some things.
Thanks again!
Regards.

[matheo]

I just found that our child modules doesn't inherit our root interceptors,
but have a single HttpXsrfInterceptor (I'm not sure where it's coming from, CommonModule, RouterModule, NgRx?)
and it force us to provide our HTTP_INTERCEPTORS again which is not ideal because it's not easy to figure out that they were modified by some third-party module and that we need to set them up again, and the root interceptors gets duplicated with the injected ones in child modules.

A better management of this via forRoot/forChild maybe would be better.
Thanks and best regards!

[magicmatatjahu]

Maybe HttpClientModule should export forInterceptors macro with config:

static forInterceptors({ inheritance: 'override' | 'concatenate' = 'concatenate' }): ModuleWithProviders<HttpClientModule> {
  const deps = [[new Optional(), HTTP_INTERCEPTORS]];
  if (inheritance === 'concatenate') {
    deps.push([new SkipSelf(), new Optional(), __HTTP_INTERCEPTORS]); // __HTTP_INTERCEPTORS because we want concatenated __HTTP_INTERCEPTORS  from parent injector
  }

  return {
    ngModule: HttpClientModule,
    providers: [
      {
        provide: __HTTP_INTERCEPTORS// new private token used only inside HttpModule
        useFactory(interceptors, parentInterceptors) {
          return [...(interceptors || []), ...(parentInterceptors || [])];
        },
        deps,
      }
    ],
  };
}

and then change definition of HttpInterceptingHandler to:

@Injectable()
export class HttpInterceptingHandler implements HttpHandler {
  private chain: HttpHandler|null = null;

  constructor(private backend: HttpBackend, private injector: Injector) {}

  handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
    if (this.chain === null) {
      const interceptors = this.injector.get(__HTTP_INTERCEPTORS, []); // this line is changed from original code
      this.chain = interceptors.reduceRight(
          (next, interceptor) => new HttpInterceptorHandler(next, interceptor), this.backend);
    }
    return this.chain.handle(req);
  }
}

It's a solution based on @miguel-leon thoughts but showing what an implementation in the HttpClientModule itself could look like. Also this works with hierarchical injectors, it means if your AppModule has some lazy module (e.g. LazyModule1) and this lazy module has another (e.g. LazyModule2) then you can make some chains of interceptors: LazyModule2 has interceptors from itself scope, from LazyModule1 and from AppModule, LazyModule1 has from itself scope and from AppModule etc...

EDIT: Next problem. Someone wants to use interceptors only from AppModule + some lazy module. When we have a hierarchy like AppModule -> LazyModule1 -> LazyModule2, then LazyModule2 should use only interceptors from App and from itself, Lazy1 similary etc... and here my proposition based on above:

static forInterceptors({ inheritance: 'override' | 'concatenate' | 'concatenateGlobal' = 'concatenate' }): ModuleWithProviders<HttpClientModule> {
  const deps = [[new Optional(), HTTP_INTERCEPTORS]];
  if (inheritance === 'concatenate') {
    deps.push([new SkipSelf(), new Optional(), __HTTP_INTERCEPTORS]); // __HTTP_INTERCEPTORS because we want concatenated __HTTP_INTERCEPTORS  from parent injector
  } else if (inheritance === 'concatenateGlobal') {
    deps.push([Injector]);
  }

  return {
    ngModule: HttpClientModule,
    providers: [
      {
        provide: __HTTP_INTERCEPTORS// new private token used only inside HttpModule
        useFactory(interceptors, parent) {
          if (parent instanceof Injector) {
            while (parent.scope !== "root") {
              parent= injector.parent;
            }
            const appInterceptors = parent.get(HTTP_INTERCEPTORS);
            return [...(interceptors || []), ...(appInterceptors || [])];
          }
          return [...(interceptors || []), ...(parent|| [])];
        },
        deps,
      }
    ],
  };
}