angularspring-cloud-gatewaymicro-frontendwebpack-module-federationangular-module-federation

Set Headers in A request that we cannot access in angular ("@angular-architects/module-federation")


I have a shell and several micro frontend apps all built with Angular 14. I've used "@angular-architects/module-federation": "^14.3.14". Everything works fine Except I could not intercept the http call which loads the remoteEntry.js file of the micro apps. All micro apps are deployed on the server. I send request to gateway microservice and gateway routes my request to micro frontend URL:

Shell => gateway => remoteEntry.js file

My authorization token must be added to the request as a header. Angular HTTP interceptors are not intercepting this call. (I think they have a different scope) Module federation did not give any option to add headers to HTTP requests ? Any suggestions would be greatly appreciated.

I tried several ways to intercept the call and add the token to it.


Solution

  • as you can find in the repository, the script is downloaded via adding a <script> element to the dom. There is no good way to actually force this library to send any headers with the request.

    you could reimplement this logic in your applilcation by sending ordinary ajax requests with headers, then creating script tag with the contents of the request, but that just sounds not that great and it would require you to handle the CORS for those requests as well