How to lazy load module in lazy loaded module in angular?

Question

It's an angular modules question.

I have a few modules exported as npm-packages, and I need both of them for my application. let's call them Inner and Outer modules.

In application I've configuration for Inner, and use it's InnerModuleService.

In OuterModule I also have InnerModule dependency and need the same InnerModuleService as in application.

But I have no idea how to pass configuration for InnerModule from my application. Can anybody help me with that?

Here is more demonstrative snippet

#NPM-Package

let innerModuleConfig;

@NgModule({
    imports: [
        CommonModule,
        InnerModule.forChild({
            config: innerModuleConfig
        })
    ],
    exports: [InnerModule]
})

export class OuterModule {
    static forRoot(config: any): ModuleWithProviders {
        innerModuleConfig = config.innerModuleConfig;

        return {
            ngModule: OuterModule,
            providers: [InnerModuleService]
        };
    }
}

#APP

let appInnerModuleConfig = {};

@NgModule({
    imports: [
        OuterModule.forRoot({
            innerModuleConfig: appInnerModuleConfig
        })
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

you can do this with the loadChildren property with the path to the module file, then reference the module itself with a hash #.

https://angular.io/guide/lazy-loading-ngmodules