モジュールまたはプラグインの外部へのインポート方法角型CLIプロダクション生成スクリプトのtypescript 2.4のimport（）機能を使用して動的にインポートする

Question

typescript 2.4 [import()][1]機能はモジュールを動的にロードするのに役立ちます。私はこの機能を試してみてうまく動作します。私は、typescriptで書かれ、インポートされたモジュールが同じフォルダにあるときは常にモジュールとコンポーネントを動的にロードできます。

プロダクションモードでビルドしようとすると問題が発生します。私はAngular-CLIを使用しており、プロダクションモードでプロジェクトをビルドすると、javascriptバンドルが生成されました。今私はモジュールをロードするのが混乱しています。

異なるプラグインを動的に追加できるプラグインベースの機能を開発しています。したがって、これらのプラグインはメインアプリから分離され、import()メソッドを使用して動的に追加できます。最初はtypescriptでプラグインを開発し、そのプラグインはimport()メソッドを使って完全にロードされています。しかし、プロダクションモードでは、import()メソッドを使用してインポートできるjavascriptライブラリである必要があります。

私はhttps://github.com/jvandemo/generator-angular2-libraryを使ってプラグインをライブラリに変換しました。 index.jsファイルをインポートしようとしました。しかし、エラーメッセージが表示されます"ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'."

次のコードは、モジュールとコンポーネントを動的にインポートするために使用したコードです。

export class DynamicComponent {  
     injector: Injector; 
     compiler: Compiler; 
     @ViewChild('container', {read: ViewContainerRef}) 
     container: ViewContainerRef; 
     componentRef: any; 

     constructor(private compFactoryResolver: ComponentFactoryResolver, injector: Injector, 
      private apiService: apiService) { 

      this.injector = ReflectiveInjector.resolveAndCreate(COMPILER_PROVIDERS, injector); 
      this.compiler = this.injector.get(Compiler); 
     } 
     addWidget(){ 

      apiService.getMoudleUrls().subscribe(module_url=>{ 
      let module_= import(module_url); //e.g './data-widget/data-widget.module'  
      module_.then(module_data =>{ 

      const keys = Object.getOwnPropertyNames(module_data); 
      let moduleFactories = this.compiler.compileModuleAndAllComponentsSync(module_data[keys[1]]); 
      const moduleRef = moduleFactories.ngModuleFactory.create(this.injector); 
      const componentFactory = moduleFactories.componentFactories 
      .find(e => e.selector === 'data-widget'); // find the entry component using selector  
      this.componentRef = this.container.createComponent(componentFactory, null, moduleRef.injector); 

      const newItem: WidgetComponent = this.componentRef.instance; 
     }, 
     error=>{}); 
    } 
    } 

例モジュールとコンポーネントは

データ-widget.module.tsは

@NgModule({ 
    imports: [ ..., 
    declarations: [DataWidget], 
    exports: [DataWidget],  
    providers: [], 
    entryComponents: [DataWidget]    
}) 
export class DataWidgetModule { 
    constructor(private widgetService: widgetService) { 
     widgetService.register('weather', DataWidget); 
    }   
} 

データ-widget.componentされていますので、

@Component({ 
    selector: 'data-widget', 
    templateUrl: 'data-widget.component.html' 
    }) 
    export class DataWidget{} 

、どのように私は、外部ロードすることができますモジュールは生産モードにありますか？

Answer 1

あなたが話しているライブラリは、npm packagesを構築するためのもので、角2/4です。

npm packageを作成し、npm registryに公開します。アップロードしたら、npmでプロジェクトにパッケージをインストールしてインポートできます。

例：

は、あなたの中myLib

と呼ばれるライブラリは、サービスがごnpm registryにライブラリをアップロードすると、あなたがして、プロジェクトでそれをインポートすることができ/exports.tsファイルに

を輸出していますMyService呼ばれていてください最初にnpm install --save myLibとインストールします。

import { MyService } from 'myLib/exports';