Angular2モジュールを動的にロードする

Question

私はAngular2アプリケーションを作成しました。私はこれをWebapackを使用してバンドルしています。 目的のファイルサイズは、依存モジュールを含めて15MBを超えて増加しました。

今、私は依存性モジュールをロードする必要があります。

私は複数のメインメニューを持っていますが、各メニューには関連するコンポーネントが含まれています。今私は非同期にユーザーメニューの選択に基づいて依存モジュールをロードしたいと思います。

Answer 1

ダイナミックモジュールロードとJITコンパイラを使用すると簡単に実行できます。ここでは一般的なアプローチがある：

constructor(private injector: Injector, private compiler: Compiler) 

loadModule(moduleName) { 
    import(pathToModule).then((module)=>{ 
     const moduleClass = module.moduleName; 
     const moduleFactory = this.compiler.compileModuleSync(moduleClass); 
     const moduleRef = moduleFactory.create(this.injector); 
     const componentFactoryResolver = moduleRef.componentFactoryResolver; 

     // then you can use the resolver to get components 
     const f = componentFactoryResolver.resolveComponentFactory(MyComponent); 
    }) 
} 

は、動的コンポーネントの詳細を読むHere is what you need to know about dynamic components in Angular