How to load dynamic external components into an Angular application

Question

I have a problem with an Angular app.

I would like to have an Angular application written in a Typscript build with (aot).

The goal is to display a user panel with some widgets. A widget is a component of Angular.

My application has built-in widgets. But widgets need to be expanded with something like a market; or created manually.

The market should upload files (js / ts / bunlde .. ??) to a specific folder.

Then my application should be able to load new widgets (= ng component) and initialize them.

My folder structure (production)

  |- index.html
  |- main.f5b448e73f5a1f3f796e.bundle.js
  |- main.f5b448e73f5a1f3f796e.bundle.js.map
  |- .... (all other files generated)
  |- externalWidgets
      |- widgetA
            |- widjetA.js
            |- widjetA.js.map
            |- assets
                 |- image.png
      |- widgetB
            |- widjetB.ts
            |- widjetB.html
            |- widjetB.css

, widgetA. , , , .

, "require" "System.import", , .

? ; .. (, widgetB ,...)

" " ​​ Angular4/webpack.

Answer 1

. NgConf.

, , - , Webpack , . , Webpack . , Webpack , . , , - SystemJS.

, entryComponents .

, , , . , Angular, . , , , AOT .

AOT, factory :

System.import('path/to/module').then((module)=>{
    const moduleFactory = module.moduleFactoryClassName;
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

AOT, JIT-:

System.import('path/to/module').then((module)=>{
    const moduleFactory = this.compiler.compileModuleSync(module.moduleClassName);
    const moduleRef = moduleFactory.create(this.parentInjector);
    const resolver = moduleRef.componentFactoryResolver;
    const compFactory = resolver.resolveComponentFactory(AComponent);
}

, , , : Angular