0

Using the latest Angular how can one accomplish this, creative ideas are welcome.

Angular project with the following modules which are lazy loaded (limiting to two modules just for brevity sake but there could be a lot more):

  • UsersModule
  • AdminModule

For the AdminModule I would like to apply additional security, mainly I would like to IP protect it. Which given the architecture design (specific to this case) means it needs to be served from another server (so different host than the other modules).

So basically this means:

  • UsersModule - on host A (open to everyone)
  • AdminModule - on host B (ip protected)

Give this scenario, how can one modify the download url Angular uses specific to the AdminModule?

Is there a way to intercept the download url Angular uses and modify it or somewhere in Angular to set a specific download url to use?

Note The AdminModule is already lazy loaded only for admins. So if your recommendation is to load it conditionally that is already done.

Note Server side the actions that the AdminModule makes have the additional security like IP protection so if your recommendation is that then that is already done, this question is only for downloading of the module client side.

Update 0

Note Using a proxy/server side solution to intercept the request and rewrite it is not possible given the design. The question is regarding how to implement it client side.

Update 1

It appears that it is possible to create a custom ResourceLoader and then provide it to Angular overriding the default implementation.

For example something like:

const providers = [{provide: ResourceLoader, useClass: MyResourceLoaderImpl}];
platformBrowserDynamic().bootstrapModule(AppModule, {providers});

Here is an example of an implantation of ResourceLoader.

However, trying it with with my app doesn't work. However, that seems like it should, am I missing anything?

Exocomp
  • 1,477
  • 2
  • 20
  • 29
  • This should probably be done on network/proxy level, not via Angular itself. Basically, leave it where it is, but intercept the specific request for the module(s) server side. This would be fairly easy with, for example, a cloudflare worker. – MikeOne Jun 29 '20 at 17:30
  • @MikeOne right server side it is possible with a proxy, the proxy would have to pass the real user IP possibly in the header, however for the purposes of this scenario unfortunately that is not an option. I disagree regarding not to be done with Angular itself, a client side solution would be a lot cleaner. – Exocomp Jun 29 '20 at 17:40
  • Not sure if I agree that this belongs client side but okay. You might want to investigate how the lazy load import works at the moment. I can imagine that you might be able to do a fetch or even use an absolute url inside import..? Never tried it but might be possible? – MikeOne Jun 29 '20 at 17:52
  • @MikeOne Regarding it belonging to the client side, well lets see, the url for the modules are generated on the client side already right so why wouldn't it make sense that you can provide a client side custom implementation. The design of Angular is such that overriding default implementations are common. For example like providing a custom PreloadingStrategy. Looking through the code, it seems it is possible to provide a custom ResourceLoader overriding the default one. That would do it. However, so far my attempt has not worked. I'll include more info in an update. – Exocomp Jun 29 '20 at 18:26

0 Answers0