2017-11-06 16 views
1

モジュールやコンポーネントをAOTコンパイルされたAngular 4アプリケーションにロードする方法を開発しようとしていましたが、私が欲しい場所に私を連れて行く。実行時のモジュールとコンポーネントの動的なロード4

  • 私の主なアプリケーションは、AOTコンパイルされ、それが実行時までロードされているものの知識がないので、私は特に、コンパイル時にエントリコンポーネントとしての私の動的モジュールを識別することはできません。

    私の要件は、次のようなあります(Angular.ioで提示された '動的な'コンポーネントの読み込みの例では明示的に必要です)

  • 私は理想的には、GET要求によってバックエンドデータベースからコードを取り出せるのが大好きですが、コンパイルされたサイトの横のフォルダに住んでいます。
  • Webpackを使用して私のメインアプリケーションをコンパイルして、それを断片に分解しています。そして、SystemJSベースのソリューションの多くは、現在の研究に基づいて、デッドエンドのように思えます。
  • 私の主なアプリケーションのコンポーネントを直接知っている必要はありません。つまり、本物のアプリケーションを別のアプリケーションにロードすることになります。動的にロードされるモジュールは、親アプリケーションとのポイント。私は角度コンパイラの存在を持っていることを要求しているようだ、私はそれを使用していない場合はAOTは何とか私もそれを含めることが許可されている場合、私は何て幸せ - 私はSystemJsNgModuleLoaderのようなツールを使用して調査してきました

他の場所。また、ngcを使ってダイナミックモジュールを直接コンパイルし、コンパイルされたコンポーネント/モジュールをロードすることも検討しましたが、これがすべて可能かどうか、あるいはそうであれば、Angularが利用できるツールがあるかどうかはわかりません。 ANALYZE_FOR_ENTRY_COMPONENTSへの参照も見てきましたが、最初の分析では私が探しているものではないことが明らかになったので、これの限界を明確に把握することはできません。

私は、共通のインターフェースを定義し、自分のダイナミックコンポーネントを自分のアプリケーションに持ってくることを要求することができると思っていましたが、Angularはそれ以外のすべてのステップを踏むのに手間取っています非角度コードをDOMに直接添付しようとしています。

私も可能なことをしようとしていますか? Angular 2+は、この種の内部アプリケーションアーキテクチャの変更を軽視していますか?

答えて

1

あなたがしようとしていることを正確に記述した記事が見つかりました。要するに、ブートストラップのライフサイクルを乗り越える必要があります。

このスニペットの魔法はここにあります。 import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts'; @NgModule({ imports: [BrowserModule], declarations: [AComponent, BComponent] }) export class AppModule { ngDoBootstrap(app) { fetch('url/to/fetch/component/name') .then((name)=>{ this.bootstrapRootComponent(app, name)}); } bootstrapRootComponent(app, name) { const options = { 'a-comp': AComponentNgFactory, 'b-comp': BComponentNgFactory };

https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429

関連する問題