Pass configuration data to services in a lazy loaded module

🚀 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.

[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. https://github.com/angular/angular/blob/1e9eeafa9e3fbfad5e94d697b8079cf649db626e/packages/router/src/router_config_loader.ts#L47-L59

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.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.