Dynamically Configuring Lazy Loaded Modules based on environment.ts (NOT the components, the lazy loaded module file itself)

[Tim Consolazio]

Here's an interesting one. Until I figured it out, my vision of a mono repo with 100% "mix and match" capability was incomplete.

Say you're working in a mono repo. You have two applications, App A and App B, completely separate. App B has a module, LazyMod, configured to lazy load, that you want to use in App A.

So in App A, you set up the path and the routes to LazyMod, etc. Everything's working nicely.

Now say: you want to conditionally configure the imported modules of LazyMod, by using environment variables.

LazyMod's components will get it's environment module from whatever parent loads it, if you pass the data in the router config.

So, both App A, and App B, in the app.module, provide environment data this way:

import { environment } from '../environments/environment';

const routes: Routes = [ { path: 'some-url', loadChildren: '../the/path/to/the/module#TheLazyLoadModule, data { env: environment } ]

So when App A loads LazyMod, it provides App A's environment data, App B will provide App B's environment data. Components access this data through the ActivatedRoute.data.env

But, say you want to conditionally configure an imported module, in LazyMod, based on environment data. (This is the problem; LazyMod appears to have no way to access the data in ActivatedRoute, if you try in the constructor etc. per usual injection, data is always empty);

So, LazyMod's module imports would look like this:

LazyMod {

     imports: [ environment.production ? ThisMod : ThatMod ]

}

This is a pretty standard pattern, but here's the problem:

In all the solutions I've seen, this pattern is enabled by importing environment data directly:

import { '../environments/environment' }

The problem: it will always use the environment data from the app it is originally located in (in this case, App B). When it's loaded into App A, lazy-load.mod will still have a path that resolves to App B's environment.

Again, trying to access the data provided in the route config by using the same pattern as a component (via ActivatedRoute) is no good.

So...now can you conditionally configure the module imports of a lazy loaded module by way of the environment, making sure that the environment data provided is always from the loading app?

I have a solution for this, but I suspect it would ruffle the feathers of the "the correct Angular way" crowd.

So before I put it out there, I'm curious if anybody has any insight.