dimanche 11 février 2018

Angular 5 dynamic plugin loading / Lazy loading

I'm working on an Angular project that needs to support adding some sort of plugins to it.

By plugins I mean code that will later be loaded and run by the main app.

I tried looking for a solution for a while now, and the best idea I could find (but not implement yet) was loading UMD modules dynamically:

System.import('app/loaded-and-compiled/lac-lazy.module.js').then((module) => {
            this._compiler.compileModuleAndAllComponentsAsync(module.LACLazyModule)
                .then((compiled) => {
                    const factory = compiled.componentFactories[0];
                    this._container.createComponent(factory);
                })
        })

Source: https://github.com/maximusk/Here-is-what-you-need-to-know-about-dynamic-components-in-Angular/blob/master/app/loaded-and-compiled/a.component.ts

The problem was that I encountered doing this was receiving errors in the console, claiming that @angular/core could not be resolved.

I'll add that this is a basic Angular 5 project, it's using the basic angular CLI.

It is important for me to say that the main project should not know what code will be injected later on after it's compiled. it should just be able to load code that'll be written to work within the app.

Anything that may point me in the right direction would be amazing, Thanks a lot for your time.




Aucun commentaire:

Enregistrer un commentaire