web-dev-qa-db-ja.com

Angular2：指定されたフォルダーからモジュールを動的にロードする

app
 |-plugins
       |-plugin1
           |-config.json
           |-plugin1.module.ts
           |-plugin1.component.ts

       |-plugin2
           |-config.json
           |-plugin2.module.ts
           |-plugin2.component.ts

上記のように、プラグインを含む "app/plugins"フォルダーがあります。各プラグインには、「config.json」ファイルが1つ含まれます。

{
   path: "feature1",
   moduleFile: "feature1.module",
   moduleClassName: "Feature1Module"
}

私が欲しいのは、アプリケーションの前にbootstrap=スキャンします "app/plugins"すべてのプラグイン設定をフォルダーにロードし、すべてのモジュールルートを遅延登録します。上記の例では、ルートは

{
     path: "feature1",
     loadChildren: "app/plugins/plugin1/plugin1.module#Plugin1Module"
}

このようにして、新しいプラグインをプラグインフォルダーにドロップしてアプリケーションを更新すると、新しくドロップされたプラグインが実行されます。

誰も私がこれを達成する方法を知っていますか？

注：angular2最新版（2.1.0）

angulartypescriptangular2-routing
22
Jahid Shohel

私はあなたが説明しているものと同じ動作を探していますが、このgithubの問題のおかげでそれを行う方法を見つけたと思います： ルートなしのコンポーネントの遅延読み込み

これを行うために私が書いたコードは次のとおりです。 plunker here

  • 最初：dynamic.module.ts、動的にロードされたモジュールとそのコンポーネント

    import { Component, NgModule } from '@angular/core'

@Component({
    selector: 'my-test',
    template: `<h1>html template of TestComponent from DynamicModule</h1>`
})

export class TestComponent { }

@NgModule({
    declarations: [TestComponent],
    exports: [TestComponent]
})

export class DynamicModule { }

  • 2つ目：モジュールパスを指定したときにモジュールを動的にロードするコンポーネントです。

    import {
Component, 
ViewContainerRef,
Compiler,
ComponentFactory,
ComponentFactoryResolver,
ModuleWithComponentFactories,
ComponentRef,
ReflectiveInjector,
SystemJsNgModuleLoader } from '@angular/core';

class ModuleNode {
    modulePath: string;
    componentName: string;
}

@Component({
    moduleId: module.id,
    selector: 'widgetContainer',
    templateUrl: './widgetContainer.component.html'
})

export class WidgetContainerComponent {
    widgetConfig: string;
    module: ModuleNode;
    cmpRef: ComponentRef<any>;

constructor(private widgetService: WidgetLoader,
    private viewref: ViewContainerRef,
    private resolver: ComponentFactoryResolver,
    private loader: SystemJsNgModuleLoader,
    private compiler: Compiler){}

openWebApp(menu:any) {
    this.loader.load(menu.modulePath)  // load the module and its components
        .then((modFac) => {
            // the missing step, need to use Compiler to resolve the module's embedded components
            this.compiler.compileModuleAndAllComponentsAsync<any>(modFac.moduleType)

                .then((factory: ModuleWithComponentFactories<any>) => {
                    return factory.componentFactories.find(x => x.componentType.name === menu.componentName);
                })
                .then(cmpFactory => {

                    // need to instantiate the Module so we can use it as the provider for the new component
                    let modRef = modFac.create(this.viewref.parentInjector);
                    this.cmpRef = this.viewref.createComponent(cmpFactory, 0, modRef.injector);
                    // done, now Module and main Component are known to NG2

                });
        });
}

ngOnDestroy() {
    if (this.cmpRef) {
        this.cmpRef.destroy();
    }
}

    }

あれについてどう思う？それは役立ちますか？ご意見ありがとうございます。

14
Mawycezil