Pass configuration data to services in a lazy loaded module

[kristofdegrave]

🚀 feature request

Relevant Package

This feature request is for @angular/core or @angular/router

Description

I have an angular Application and a separate library which contains a feature. This feature is Lazy Loaded.

In that feature I have a service which needs some configuration that is environment dependent. So this information is present in the environment.ts files of the application.

Now I'm looking for a way to pass this environment information to my lazy loaded feature library. These services should only be accessible inside this module or its decedents.

Describe the solution you'd like

I was thinking about a similar solution as the forRoot or the forChild methods that currently exists.

@NgModule({
   imports: [
      RouterModule.forRoot([{
         path: 'feature',
         loadChildren: () => import('path/to/feature').then(module => module.FeatureModule.forChild(environment.whateverConfigSetting))
       }])
   ]
})
export class AppModule {}

Describe alternatives you've considered

An alternative solution I currently use is that I have created an addition library with a module that implements a forRoot method. And the module.forRoot() of this library is added to the imports. of the AppModule. Disadvantage of this is that the services is now exposes to the whole application.

An other alternative solution could be to inject a AppSettings service into the service living in the feature library and fetch the environment settings of this service. Disadvantage of this solution is that for every feature library I additionally add I have a tight coupling to that service.

[mlc-mlapis]

@kristofdegrave You can use dynamic import(...) to load a lazily-loaded module and during instantiating of that module, you can pass an injector, which you can modify before (add new tokens, ...), so you have those injections available in constructors of any part of such a lazily-loaded module.

[kristofdegrave]

@mlc-mlapis Can you please provide a little example of that, I don't really get what you mean.

[mlc-mlapis]

@kristofdegrave Principally like this: #31886 (comment)

[kristofdegrave]

@mlc-mlapis I found that issue before I filed this one. But that thread focuses on loading modules outside the router, it mimics the behavior of what the router does with the advantage you can also inject providers.

What I am looking for is a solution with the router. I just want a decoupling between my feature libs and my Applications, but those feature libs need to run inside a context of an application, and that context needs to deliver some configuration to my feature libraries.

[mlc-mlapis]

@kristofdegrave OK, using only the router way is a problem. Theoretically, you can nest the one into the other, but it's a question if it's not too complicated.

[kristofdegrave]

I think I found a possible solution on how to handle this.
I have seen that the loadModuleFactory (which handles the loadChildren) in the router accepts an instance of thar NgModuleFactory.

angular/packages/router/src/router_config_loader.ts

Lines 47 to 59 in 1e9eeaf

	private loadModuleFactory(loadChildren: LoadChildren): Observable<NgModuleFactory<any>> {
	if (typeof loadChildren === 'string') {
	return from(this.loader.load(loadChildren));
	} else {
	return wrapIntoObservable(loadChildren()).pipe(mergeMap((t: any) => {
	if (t instanceof NgModuleFactory) {
	return of (t);
	} else {
	return from(this.compiler.compileModuleAsync(t));
	}
	}));
	}
	}

With that in my mind I implemented an own implementation of the NgModuleFactory which accepts a ModuleWithProviders. https://gist.github.com/kristofdegrave/518622c22c6bd6a65382d9365e965d84

Using this implementation I can do the following in my routes:

RouterModule.forRoot([{
   path: 'feature',
   loadChildren: () =>
      import('path/to/feature').then(module => 
         new LazyNgModuleWithProvidersFactory(
            module.Feature.forRoot('Feature base url')))
}])

Some feedback on the solution would be nice, since my knowledge about the injector and compiler is limited, I don't know if I'm doing things I shouldn't.

[Wilt]

"Some feedback on the solution would be nice"

Would also be nice for others ending up here looking for a similar solution. I have parent modules lazy loading some feature modules and depending on the parent some things need to be configured differently, would be great to see some feedback on what @kristofdegrave proposed here.

[kristofdegrave]

@Wilt No feedback received, but the proposed solution with the LazyNgModuleWithProvidersFactory is something that works.
I Also added a PR for this behavior, but it has been rejected: #36084