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.

Am trying to accomplish the same thing, would you be kind and post an answer or provide the steps that worked for you? thanks. — maximz101, Oct 06 '17 at 10:07
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 — Seb, Oct 06 '17 at 11:57
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. — maximz101, Oct 06 '17 at 13:24
have a look at this repo, this will help : https://github.com/Toxicable/module-loading — Seb, Oct 10 '17 at 09:45
maybe this will help: https://stackoverflow.com/questions/50149016/load-new-modules-dynamically-in-run-time-with-angular-cli-angular-5/50395048#50395048 — Michael, May 22 '18 at 07:01
@Seb How did you solve it in the end, without using SystemJS ? — vooxo, Oct 06 '20 at 11:09

score 3 · Answer 1 · edited Sep 21 '17 at 16:02

3

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

edited Sep 21 '17 at 16:02

Seb

3,602
8
36
52

answered Sep 20 '17 at 17:44

Max Koretskyi

101,079
60
333
488

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 ? – Seb Sep 21 '17 at 07:08
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 ? – Seb Sep 21 '17 at 07:58
it should be available as a global variable, not a dependency, see my example above – Max Koretskyi Sep 21 '17 at 08:04
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 ? – Seb Sep 21 '17 at 10:26
@Seb, what do you mean `builded module`? aot compiled? – Max Koretskyi Sep 21 '17 at 10:34
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. – Seb Sep 21 '17 at 11:16
how do you build it? – Max Koretskyi Sep 21 '17 at 12:34
ng build --prod, so using aot compilation – Seb Sep 21 '17 at 12:43
what I mean is should I try to get http://xxx/vendor.bundle.js or http://xxxx/main.bundle.js or http://xxx/inline.bundle.js – Seb Sep 21 '17 at 13:55
When getting the vendor.bundle.js i get : http://localhost:4200/vendor.bundle.js detected as amd but didn't execute correctly – Seb Sep 21 '17 at 15:49
OK, I'll try later, when I have time – Max Koretskyi Sep 21 '17 at 15:55
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 ? – Seb Sep 22 '17 at 15:04
it's certainly doable, but requires understanding for how webpack bundles modules together. I haven't had time to look at it yet. – Max Koretskyi Sep 22 '17 at 15:20
Maybe I need to use SystemJS in my main app as well ? – Seb Sep 25 '17 at 07:28
@Seb, do you maybe want to setup a paid session on codementor.io? – Max Koretskyi Sep 25 '17 at 08:40
@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 – Max Koretskyi Sep 25 '17 at 09:17
did you published the result? @AngularInDepth.com – Dani Andújar Nov 08 '17 at 13:57
@user3757628, no, didn't have time – Max Koretskyi Nov 08 '17 at 14:02
@user3757628, I didn't have time to implement anything, there's nothing to share – Max Koretskyi Nov 08 '17 at 14:23

score 2 · Answer 2 · answered Mar 15 '18 at 12:29

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

answered Mar 15 '18 at 12:29

DianaDu

43
5

Thanks for the sample! Would this work flawlessly with AOT? Maybe the JIT compiler has to be manually created and provided? – LppEdd Jan 28 '19 at 11:12
@LppEdd Actually, that's where I was stuck. Finally, I chose to upgrade my Angular version to 6. – DianaDu Jan 30 '19 at 03:36
Isn't it the same? I mean, when using AOT the JIT compiler gets stripped away from the page – LppEdd Jan 30 '19 at 08:13

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

2 Answers2

Linked