Loading dynamic module from another url- angular4

Question

Is it possible to reference a module (already compile in umd or es format) and load it dynamically in a already compiled angular application?

Main shell application hosted at: http://plugin_shell.mydomain.com
A module (with a bunch of components, services, etc): compiled code is hosted at another url. let say: http://plugins/modules/myfirstplugin.umd.js
When shell load. Load all modules, render specific components, refer to services, use class etc.

I tried to load the module with SystemJsNgModuleLoader.load, but it does seem to work with this kind of use cases.

Thanks

EDIT: Same question (no answer): How to dynamically load external angular 2 module (like served from an external module.bundle.js)

You're talking about a compiled ng application (aka webpack fragments) but you're also mentioning systemJS, which one are you using? — Supamiu
– Supamiu, Commented Aug 8, 2017 at 14:41
Well the shell is a webpack application. All the module, must be dynamic, so they are currently compiled as umd module with rollup.The problem here is that module will be updated and publish at an url. The shell must load them (and have the last version available) from the url. — ThePainnn
– ThePainnn, Commented Aug 8, 2017 at 14:44
github.com/webpack/webpack/issues/150 this might help you, but because I don't know how it can be done exactly, I won't post it as an answer. It seems like people achieved what you want to do on this issue. — Supamiu
– Supamiu, Commented Aug 8, 2017 at 14:46

Max Koretskyi · Accepted Answer · 2017-08-08 14:48:32Z

3

You can do it like this:

@Component({
  providers: [
    {
      provide: NgModuleFactoryLoader,
      useClass: SystemJsNgModuleLoader
    }
  ]
})
export class ModuleLoaderComponent {
  constructor(private _injector: Injector,
              private loader: NgModuleFactoryLoader) {
  }

  ngAfterViewInit() {
    this.loader.load('app/t.module#TModule').then((factory) => {
      const module = factory.create(this._injector);
      const r = module.componentFactoryResolver;
      const cmpFactory = r.resolveComponentFactory(AComponent);

      // create a component and attach it to the view
      const componentRef = cmpFactory.create(this._injector);
      this.container.insert(componentRef.hostView);
    })
  }
}

Read Here is what you need to know about dynamic components in Angular for more details. Specifically Dynamic module loading and compilation section.

answered Aug 8, 2017 at 14:48

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

35 Comments

ThePainnn Over a year ago

but this code is good when module are baked in the application that was compiled. My shell is already compiled and module/component comes from another source entirely. For example I am trying to do in dev: const url: string = 'http://localhost:8082/core/core.umd.js'; System.import(url).then((module) => { ...

swingmicro Over a year ago

I have a similar requirement @ThePainnn were you able to solve this issue. if so please share the details. Thanks

Max Koretskyi Over a year ago

@ThePainnn, Webpack can't do that, that's correct. I use SystemJS for that

Max Koretskyi Over a year ago

@meno, no workaround because Webpack isn't designed to be a module loader. I use both webpack and SystemJS in my project.

Max Koretskyi Over a year ago

@ANewGuyInTown, yes, it can load modules, but only those known at the build time. It can't load modules dynamically similar to how import() does it

|

Collectives™ on Stack Overflow

Loading dynamic module from another url- angular4

1 Answer 1

35 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

35 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related