Angularおよびマイクロフロントエンド
巨大な単一ページのモノリスをマイクロフロントエンドアーキテクチャに分割する方法について、いくつかの研究を行っています。
アイデア：
- ページは、自律的に実行されるいくつかのコンポーネントで構成されます
- 各コンポーネントは1つの開発チームによって管理されます
- 各チームは、他のチームのコンポーネントを壊すことなく、コンポーネントを変更、更新、展開できます
- 各チームは独自のツールスタックを選択します
理由
大規模なアプリケーションを効率的に開発するには、多くの人がそれに取り組む必要があります。ただし、アプリ/チームごとの開発者の数はうまくスケーリングしません。ただし、独立したチームによる複数の独立したアプリの並行開発は、任意にスケーリングできます
これを念頭に置いて、チームが独自のツールスタックを選択し、特にサードパーティのライブラリ（アンギュラー、リアクション、jqueryなど）の個別のバージョンアップグレードを実行できることが不可欠です。そうでない場合、フレームワークの更新は、本番環境にデプロイする前に、すべてのコンポーネントと互換性が必要です。
これはAngularで動作しますか？
独立したバージョンアップグレードが必要ですが、サポートされているいくつかのフレームワーク（Angular、React、Vue、Polymer ...）にチームを制限することは合理的です。
ただし、Angular 5は巨大なマルチモジュールアプリをサポートするプラットフォームフレームワークであると考えられますが、複数の独立したAngularアプリを同じブラウザーウィンドウで実行することはほとんど不可能と思われます。
HTMLインポートを利用して、単一のWebアプリでbootstrapいくつかのAngular-Apps（異なるバージョン、それぞれ独自のサーバーでホストされています）を管理しました。ただし、アプリ間で共有する必要があるglobal依存関係がいくつかあります
- zone.jsは一度しか起動できません
- ルーティングにはURLの変更が必要です
- Cookie、セッションストレージなどのブラウザ関連...
ネットには複数の角度モジュールをbootstrapする方法に関するいくつかの記事がありますが、それらはすべて同じコアアプリ内の複数のモジュールを参照しています。つまり、同じフレームワークバージョンで実行されていることを意味します更新では、モノリス全体を再構築して展開する必要があります。
"iframes"以外に複数のAngular（5）同じページで実行中のアプリを取得するソリューションはありますか？
主に個別のスタック要件のためにこの考えを完全に提案する代わりに、トレードオフをレイアウトし、これを可能にするいくつかの制限を提供します。
ページは、自律的に実行されるいくつかのコンポーネントで構成されます
これはAngularコンポーネントですぐに提供され、入力と出力が明確に区別されていることを知っています。
Small CAVEAT：@Inputにオブジェクトを渡し、@Output()相互作用するコンポーネントでイベントオブジェクトを発行する場合/定義されたインターフェイスについて事前に同意する必要があります。
回避策：これらの成果物を定義するだけの別のTypeScriptプロジェクトを作成します。他のすべての「コンポーネントプロジェクト」は、この特定のバージョンに依存します。
各コンポーネントは1つの開発チームによって管理されます
開発チームは、オープンソースの他のAngularプロジェクトと同じようにコンポーネントを配布できます。成果物をnpmリポジトリに公開できます。帰属するコンポーネントを開発するには、 Angular Material2 を参照することをお勧めします。これは圧倒的かもしれませんし、 ngx-library-builder （ Angular Team Member filipesilva/angular-quickstart-lib ）各コンポーネントチームが使用します。
警告：この日付までangularチームには、Angular CLIで明らかなように、プロジェクトのセットアップを共有するクイックコンポーネントライブラリがありません。しかし、多数の開発者がAngular CLIのギャップを埋めるために、ある種のライブラリビルダーを作成しました。
各チームは、他のチームのコンポーネントを壊すことなく、コンポーネントを変更、更新、展開できます
メインプロジェクトですべてのコンポーネントをプルし、CIサーバーで定期的/変更トリガーのビルド/デプロイを実行します。これは基本的に、すべての最新のコンポーネントリリースでAOTプロダクションビルドを生成しています。追加のボーナスとして、一部の自動e2eテストを構築して自動化された統合テストを実行し、1つのコンポーネントの副作用が他のコンポーネントを破壊しないことを確認できます。
警告：各チームがコンポーネントをどのように開発するか、つまりメモリ、CPU、およびその他のリソースの最適な使用と処理を行う方法を管理することは困難です。例えばあるチームがサブスクリプションの作成を開始し、それらを削除しない場合はどうなりますか。いくつかの静的コード分析を使用すると便利ですが、ソースコードも公開しない限り、現時点ではこのソースコードを利用できません。
各チームは独自のツールスタックを選択します
IDEや一部の「devDependencies」などの開発者ツールのように「toolstack」を意味する場合を除き、これは完全な取引ブレーカーです。各チームの「devDependencies」の特定の部分には、コンパイラなどのangular devキットとまったく同じバージョンが必要です。
少なくとも、各チームは同じAngular、RxJSなどを使用する必要があります。
最も重要なことは、各チームがbootstrapコンポーネントを持たないことに注意する必要があります-メインプロジェクトのみがbootstrapモジュールを持ち、それはbootstrapルートになります成分。これは、zone.js問題の解決に役立ちます
これはAngularで動作しますか？
制限を認識し、ガバナンスを提供する場合は、それを選択することをお勧めします。
私たちも同じ質問をしました。残念ながら、質問に対する答えは
複数のAngular（5）アプリを同じページで実行するための「iframe」以外のソリューションはありますか（編集：各Angularアプリ別のAngularバージョンを使用できますか？
現在は
いいえ、残念ながら、Angularの変更検出（zone.jsを使用）を使用する限り、そうではありません。
Zone.jsにより、Angularはグローバルスコープを汚染します。さらに悪いことに、zone.jsは非常に多くのブラウザーAPI（ https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md ）にパッチを適用して、ゾーンがいつあるかを検出します完了しました。
フレームワークがグローバルスコープに影響しない場合にのみ、1つのページでフレームワークの異なるバージョンを副作用なしで使用できます（これはReact und Vueに当てはまるようです）。次に、Webpackを介して、各アプリケーションに異なるフレームワークバージョンをバンドルできます（スコープが分離され、各アプリケーションバンドルのサイズが大きくなるという欠点があります）。
したがって、異なるアプリケーション/モジュールを1ページに統合する必要があるAngularを使用してWebページを構築する場合、現時点で唯一可能なソリューションは、展開モノリスを作成することです（例： bhantolが答えで説明したように、CI/CDシステムによる1つのAngularアプリケーション。
Angularチームも問題を認識しており、次のメジャーバージョンで問題に取り組む可能性があるようです。 Angular Elementsロードマップに関する次のGithubの問題に関するrobwormwaldの回答を参照してください。 https://github.com/angular/angular/issues/20891
次のメジャーバージョンAngular 6が3月の終わりにリリースされるときに、そのトピックに関するAngularチームによる詳細情報が提供されることを願っています。
Angular Elements（Custom Elements）をご覧ください。 https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/
新しいIonicバージョン（4）は、AngularのすべてのバージョンおよびすべてのJSフレームワークで使用できるように完全に基づいています。
そのために、彼らは https://stenciljs.com/ を作成しました。これは、カスタム要素の作成に役立ちます。
しかし、すべてのチームがAngularを使用している場合、各チームはngm for exempleを使用してライブラリを作成できます。
はい、できます。
ただし、Webコンポーネントを書くときは、Webコンポーネントのポイント全体を再利用するため、フレームワークに引っかかってしまいたくないおそらくどこでも。
私はあなたのビジョンを共有します。ソフトウェアの品質と開発者の生産性にとって、実装に関しては大きなアプリよりも焦点を絞った機能に取り組むほうが間違いなく優れています。
最後に、あなたが今探しているのはAngularではなく、StencilJS。ステンシルは、コンポーネントの内部で仮想DOMを生成し、UIのパフォーマンスを向上させるWebコンポーネント用のコンパイラです。見てみな ;-）
Iframe以外に、SPAフレームワークで現在利用可能なオプションがもう1つあります。サンプルコードはここから入手できます。
https://github.com/PlaceMe-SAS/single-spa-angular-cli-exampleshttps://github.com/joeldenning/simple-single-spa-webpack-例
しばらくの間、あなたのニーズに対する解決策があったようです。 Single-SPAプロジェクトをご覧ください HERE 。
これは、マイクロSPAプロジェクトのラッパーSPAプロジェクトです。
IFrameとpostMessageを介した通信とは別の異なるAngularアプリを統合する唯一の方法は、それらを「ディープリンク」し、URLパラメーターを使用して情報を交換することです。すべてのAngularアプリは、独自のブラウザータブに配置されます。ただし、一般的なサービスおよびコンポーネントの場合、すべてのAngularアプリで使用される「共有カーネル」を実装する必要がある場合があります。したがって、特定のAngularバージョン範囲にとどまります。この共有カーネルが必要な場合は、NGModuleアプローチをお勧めします。 Angular 2バージョンとAngular 5バージョンは、下位互換性があるため、1つのアプリで混在させることができます。 Angularチームが重大な変更を導入するまで、チームが同じバージョンに固執する緊急の必要はありません。それにもかかわらず、あなたが更新していないとき、あなたの技術的な負債は増加します。技術更新の頻度は、Angular/Javascript領域で間違いなく高くなっています。