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.

Prophecy

have you been able to solve the problem? – Stonewort

Yes but not using systemjs at all – Prophecy

Am trying to accomplish the same thing, would you be kind and post an answer or provide the steps that worked for you? thanks. – Stonewort

I need to make a github project, once I have few minutes but the idea is : create your plugin as an angular app, bundle it as an UMD, in your main app do a simple get to retrieve the plugin bundle and use "classic" dynamic component use as describe on angular website – Prophecy

what do you mean by a simple get? a simple HTTP get request? how do you parse the module then with its dependencies? I really appreciate your help as am not able to make it work. – Stonewort

have a look at this repo, this will help : github.com/Toxicable/module-loading – Prophecy

maybe this will help: #50149516 – Hamforrd

@Prophecy How did you solve it in the end, without using SystemJS ? – Hoyden

too long time to remember sry – Prophecy

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

Implicative

Thanks for your help, i'll give it a try today ! just one more question, should the remote module be packaged in a specific way ? – Prophecy

ok Great, when trying to use SystemJs in a component, it looks like i can't get access to it, weird. is there anything I should do for angualr to take account of the new dependency ? – Prophecy

it should be available as a global variable, not a dependency, see my example above – Implicative

Yes my mistake, i didn't notice the declare var SystemJS; Just an exported class with applied decorator, shouldn't I expose a builded module from my remote server ? – Prophecy

@Seb, what do you mean builded module? aot compiled? – Implicative

yes aot compiled, actually it's kind of hard for me to understand how to make my module available on a webserver and what url I should hit to retrieve it. – Prophecy

how do you build it? – Implicative

ng build --prod, so using aot compilation – Prophecy

what I mean is should I try to get xxx/vendor.bundle.js or xxxx/main.bundle.js or xxx/inline.bundle.js – Prophecy

When getting the vendor.bundle.js i get : localhost:4200/vendor.bundle.js detected as amd but didn't execute correctly – Prophecy

OK, I'll try later, when I have time – Implicative

I start to think it's impossible, I can get an umd module remotly. This module use @angular/common so SystemJS when it loads the module tries to get localhost:8080/xx/@angular/common. looks like SystemJS does not know about the context its running into, any idea ? – Prophecy

it's certainly doable, but requires understanding for how webpack bundles modules together. I haven't had time to look at it yet. – Implicative

Maybe I need to use SystemJS in my main app as well ? – Prophecy

@Seb, do you maybe want to setup a paid session on codementor.io? – Implicative

@Seb, if it's around 15 minutes I think I can make for free. I just need a record on codementor.io. Let me explore this option – Implicative

did you published the result? @AngularInDepth.com – Necropolis

@user3757628, no, didn't have time – Implicative

@user3757628, I didn't have time to implement anything, there's nothing to share – Implicative

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

Humfrid

Thanks for the sample! Would this work flawlessly with AOT? Maybe the JIT compiler has to be manually created and provided? – Dereliction

@Dereliction Actually, that's where I was stuck. Finally, I chose to upgrade my Angular version to 6. – Humfrid

Isn't it the same? I mean, when using AOT the JIT compiler gets stripped away from the page – Dereliction