从另一个 url-angular4 加载动态模块 [英] Loading dynamic module from another url- angular4

问题描述

是否可以引用一个模块(已编译为 umd 或 es 格式)并在已编译的 Angular 应用程序中动态加载它?

Is it possible to reference a module (already compile in umd or es format) and load it dynamically in a already compiled angular application?

1. 主 shell 应用程序托管在:http://plugin_shell.mydomain.com
2. 一个模块(包含一堆组件、服务等):编译后的代码托管在另一个网址.让我们说:http://plugins/modules/myfirstplugin.umd.js
3. 当外壳加载时.加载所有模块，渲染特定组件，参考到服务、使用类等.

我尝试使用 SystemJsNgModuleLoader.load 加载模块，但它似乎适用于此类用例.

I tried to load the module with SystemJsNgModuleLoader.load, but it does seem to work with this kind of use cases.

谢谢

同样的问题(没有答案):如何动态加载外部 angular 2 模块(如从外部 module.bundle.js 提供)

Same question (no answer): How to dynamically load external angular 2 module (like served from an external module.bundle.js)

推荐答案

你可以这样做:

@Component({
  providers: [
    {
      provide: NgModuleFactoryLoader,
      useClass: SystemJsNgModuleLoader
    }
  ]
})
export class ModuleLoaderComponent {
  constructor(private _injector: Injector,
              private loader: NgModuleFactoryLoader) {
  }

  ngAfterViewInit() {
    this.loader.load('app/t.module#TModule').then((factory) => {
      const module = factory.create(this._injector);
      const r = module.componentFactoryResolver;
      const cmpFactory = r.resolveComponentFactory(AComponent);

      // create a component and attach it to the view
      const componentRef = cmpFactory.create(this._injector);
      this.container.insert(componentRef.hostView);
    })
  }
}

阅读 这里是您需要了解的有关 Angular 中的动态组件的内容 以获取更多详细信息.特别是动态模块加载和编译部分.

Read Here is what you need to know about dynamic components in Angular for more details. Specifically Dynamic module loading and compilation section.

这篇关于从另一个 url-angular4 加载动态模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！