Angular 13 how to configure manually lazy loaded module

Question

I've tried everything to find a solution online and did research for days now but I'm unable to understand Angulars current concept of lazy loading module / components WITHOUT the router.

My overall scenario:

In my case my Angular App is only loaded as a part of a bigger page. I have placeholder distributed on that page like <div id="first-comp-container">. Now when my App is loaded I want to lazy load modules/libraries. Some of the modules need some sort of configuration. Once a module is loaded I want to create a component from that package and render it inside one off the placeholder.

My dynamic components have inputs and output events.I'll split up my scenario in a few seperate questions.

Problem for this question: I know I can lazy load a module in Angular 13 this way without router

const { MappingModule } = await import('@hwrm/mapping');
const mapModuleRef =  createNgModuleRef(MappingModule);

But first of how can I pass a provider like a InjectionToken to that lazy module in a form that it remains lazy? Is there any way to pass a configuration to a lazy module like ModuleWithProviders forRoot()?

Answer 1

the second parameter of createNgModuleRef method is an Injector, so you can pass either an existing injector with defined providers or use the static method Injector.create to create a new injector, passing in providers, like so:

Injector.create({ providers: [{ provide: `InjectionToken`, useValue: {}] });

Obviously you can provide any sort of StaticProvider here, InjectionToken is just a placeholder name.

So a more complete example using your code might be:

const { MappingModule } = await import('@hwrm/mapping');
const providers = [{ provide: SOME_CONFIG, useValue: { foo: 'bar' } }];
const injector = Injector.create({ providers });
const mapModuleRef =  createNgModuleRef(MappingModule, injector);