Get and load a remote component/module in an angular 4.4 app

Question

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.

Answer 1

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

Answer 2

I have realized getting and loading remote component based on Angular 4. Feel free to check my github project:https://github.com/dianadujing/dynamic-remote-component-loader