angular - 在 angular 4.4 应用程序中获取并加载远程组件/模块

Question

这是我正在努力实现的目标:我想使用“插件”创建一个应用程序，我的意思是插件:

另一个可以部署在远程主机上并显示在我的应用程序中的 Angular 组件/模块。

看起来我不能直接用 webpack 做这样的事情，我应该使用 SystemJs 来动态加载模块。

欢迎任何使用 SystemJs 和 Webpack (ng cli) 的建议，以及如何调用远程模块和加载它们的示例。

Answer 1

是的，您需要将 systemjs 添加到您的 angular-cli 并使用它来加载模块。然后你可以使用 componentFactoryResolver 来解析模块中你需要的组件。要将 systemjs 添加到您的项目中，请安装它:

npm i systemjs

并将以下内容放入 angular-cli.json:

"scripts": [
    "../node_modules/systemjs/dist/system.src.js"
],

同时在页面中添加指向 scripts.js 的链接:

这将加载 systemjs 并将作为全局对象使用。然后你可以像这样使用它:

declare var SystemJS;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    SystemJS.load(...);
  }

有关如何使用 SystemJS 加载模块的详细信息，请参阅 How to load dynamic external components into Angular application 答案