动态加载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);
    })
}

在Here is what you need to know about dynamic components in Angular

中阅读有关动态组件的更多信息