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
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
