Angular reuse same lazy load module for multiple root paths

Question

I've splitted my app into two modules: one with main basic functionality and other with less-used features like account settings, faq pages and more.

What I'm trying to accomplish is to lazy load the second module for some root route paths, like /account or /settings without having to create many different modules. As far as I know Angular lazy load only works with one root route, and the routes configured in the lazy loaded module are set as children of that route.

 {
        path: 'account',
        loadChildren: './modules/settings/settings.module#SettingsModule',
 },
 {
        path: 'settings',
        loadChildren: './modules/settings/settings.module#SettingsModule',
 },

Answer 1

The Angular team is working on standalone components, that could potentially make loading some rarely used parts less painful:

https://blog.angular.io/an-update-on-standalone-components-ea53b4d55214

One easy (although not 100% optimal) way that is good enough for a lot of requirements probably is using a single shared module - that way your extra overhead is "just" to create another feature module

Answer 2

To create an instance of a component in a lazy loaded module without the router, this snippet could help:

class LazyLoader {
    constructor(private _injector: Injector,
                private _moduleLoader: NgModuleFactoryLoader) {
    }

    public loadLazyModule() {
        this._moduleLoader.load('./modules/settings/settings.module#SettingsModule')
            .then((moduleFactory: NgModuleFactory<any>) => {
                const moduleRef = moduleFactory.create(this._injector);

                // Here you need a way to reference the class of the component you want to lazy load
                const componentType = (moduleFactory.moduleType as any).COMPONENT_CLASS;
                const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(componentType);
                const componentRef = container.createComponent(compFactory);

                // Instance of the lazy loaded component
                componentRef.instance 
            })
    }
}

Answer 3

The truth is that, unless you do something dynamically loaded, like in the answer above, you cannot do this. Angular is not intended to work, out of the box, with this type of structure. This is a common problem and is already being addressed for future releases, with the use of standalone components (see https://netbasal.com/aim-to-future-proof-your-standalone-angular-components-accb574d273f)

So, for your case, I think the best approach would be break your main module into core, and shared modules, and create a separate module for each feature module (account settings, faq pages, ...).