在angular 4.4应用中获取并加载远程组件/模块 [英] Get and load a remote component/module in an angular 4.4 app

问题描述

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

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

看起来我无法直接使用webpack进行此类操作，而应该使用SystemJs动态加载模块.

欢迎使用SystemJs和Webpack(ng cli)，这是有关如何调用远程模块并加载它们的示例的任何建议.

解决方案

是的，您需要将system.js添加到您的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加载模块的详细信息，请参见如何将动态外部组件加载到Angular应用程序中答案

Here is what i'm trying de achieve : I want to create an app using "plugins", by plugins I mean :

Another angular component/module that could be deployed on a remote host and displayed in my app.

Looks like I can't do such thing with webpack directly and that I should use SystemJs to dynamically load a module.

Any advice would be welcome to use SystemJs and Webpack (ng cli), examples of how to call remote module and load them.

解决方案

Yes, you need to add systemjs to your angular-cli and use it to load a module. Then you can use componentFactoryResolver to resolve the components you need in the module. To add systemjs to your project install it:

npm i systemjs

and the following into angular-cli.json:

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

Also add a link to scripts.js in the page :

This will load systemjs and it will available as a global object. You can then use it like this:

declare var SystemJS;

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

For details how to use SystemJS to load a module see How to load dynamic external components into Angular application answer

这篇关于在angular 4.4应用中获取并加载远程组件/模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！