Angular 2.2 Dynamische Lastkomponenten mit System.import

Question

In meiner Angular RC5 App habe ich den folgenden Code, um dynamisch Komponenten zu laden:

public LoadComponentAsync(componentPath: string, componentName: string, locationAnchor: ViewContainerRef) { 
    (<any>window).System.import(componentPath) 
     .then(fileContents => { 
      return fileContents[componentName]; 
     }) 
     .then(component => { 
      this.resolver.resolveComponent(component).then(factory => { 
       let comp = locationAnchor.createComponent(factory, 0, locationAnchor.injector).instance; 
       //... 
      }); 
     }); 
} 

Eine Komponente war ich Laden sah wie folgt aus:

import { Component } from "@angular/core"; 

@Component({ 
    selector: "my-test", 
    template: `Test`, 
}) 
export class Main { 
    constructor() { 
     alert("Test"); 
    } 
} 

Da ComponentResolver entzogen ist, suche ich nach einer neuen Lösung. Ich konnte keinen finden. Die vielversprechendste Lösung, die ich bisher gefunden:

loadSubcomponent(modulePath: string, componentName: string) { 
    (<any>window).System.import(modulePath) 
     .then((module: any) => module[componentName]) 
     .then((type: any) => { 
      return this.compiler.compileModuleAndAllComponentsAsync(type) 
     }) 
     .then((moduleWithFactories: ModuleWithComponentFactories<any>) => { 
      const factory = moduleWithFactories.componentFactories.find(x => x.componentType.name === componentName); 
      let componentRef = this.extensionAnchor.createComponent(factory, 0); 
     }); 
} 

Quelle: Angular2 RC6 - Dynamically load component from module

Leider hat es nicht funktioniert, wie ich erwartet hatte. Wenn ich das nenne. LoadSubcomponent ("/ main", "Main"); Ich bekomme folgende Fehlermeldung:

Irgendwelche Vorschläge?

Answer 1

Das folgende beantwortet die Frage nicht vollständig, aber es gibt eine mögliche Lösung.

Der obige Fehler tritt auf, weil wir ein Modul und nicht eine einzelne Komponente laden müssen. Indem @NgModule hinzugefügt und die Komponente deklariert wird, können wir sie erwartungsgemäß laden.

Hier ist ein kleines Beispiel eines Moduls mit einer Komponente, die durch den Aufruf

this.loadSubcomponent("/main", "Main");

von oben beladen werden können:

@NgModule({ 
declarations: [Main] 
}) 

@Component({ 
    selector: "my-test", 
    template: `Test`, 
}) 
export class Main { 
    constructor() { 
     alert("Test"); 
    } 
} 

Es sieht aus wie ich bin nicht der einzige, der möchte um nur Komponenten laden zu können:

Removal of compileComponentAsync in RC6