角度重用相同的多个根路径的延迟加载模块

Question

我将我的应用程序拆分为两个模块:一个具有主要基本功能,另一个具有较少使用的功能,如帐户设置,常见问题页面等.

我想要完成的是为某些根路径路径延迟加载第二个模块,/account无论/settings是否需要创建许多不同的模块.据我所知,Angular延迟加载仅适用于一个根路由,并且延迟加载模块中配置的路由被设置为该路由的子路由.

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

Answer 1

要在没有路由器的情况下在延迟加载模块中创建组件的实例，此代码片段可以提供帮助：

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 
            })
    }
}