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

Question

这是我正在尝试实现的目标：我想使用“插件”创建一个应用程序，我所说的插件是：

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

看来我不能直接使用 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"
],

还要在页面中添加 script.js 的链接：

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

declare var SystemJS;

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

有关如何使用 SystemJS 加载模块的详细信息，请参阅如何将动态外部组件加载到 Angular 应用程序中答案