动态加载Angular2模块

Question

我已经创建了一个Angular2应用程序，我正在使用Webapack捆绑它。 现在，包括相关模块在内，目标文件的大小已增加到15MB以上。

现在，我想根据需求加载依赖模块。

我有多个主菜单，每个菜单包含一个带有相关组件的模块。 现在，我想基于用户菜单选择异步加载依赖项模块。

Answer 1

您可以使用动态模块加载和JIT编译器轻松地做到这一点。 这是一般方法：

constructor(private injector: Injector, private compiler: Compiler)

loadModule(moduleName) {
    import(pathToModule).then((module)=>{
        const moduleClass = module.moduleName;
        const moduleFactory = this.compiler.compileModuleSync(moduleClass);
        const moduleRef = moduleFactory.create(this.injector);
        const componentFactoryResolver = moduleRef.componentFactoryResolver;

        // then you can use the resolver to get components
        const f = componentFactoryResolver.resolveComponentFactory(MyComponent);
    })
}

阅读更多有关动态组件int的知识， 这是您需要了解的有关Angular中动态组件的知识