angularアプリを別のアプリに埋め込む方法
私のチームは、しばらく運用されていたangular 5アプリケーションを開発しましたが、最近、会社が所有する他の3つのサイトでアプリを機能させるという任務を負います。 1つのサイトはAngular6で構築されたSPAであり、もう1つのサイトはAngular5を使用するSPAでもありますが、もう1つのサイトはjQueryなどの古いライブラリを使用しています。
経営陣は、Angular5 SPAとすぐに統合することを望んでいたため、アプリケーション全体を子ルートを持つモジュールとしてエクスポートし、他のアプリケーションにブートストラップを実行させました。
しかし、上記のアプローチは非角型サイトでは機能しないのではないかと心配しています。また、これは、「ホスト」アプリが些細なアプリではないアプリケーションのすべての依存関係を知っている必要があるため、両方のアプリケーションを緊密に結合し（かなり大きいと思います）、それらをインストールすると、両方のアプリケーションが依存関係またはフレームワーク自体をアップグレードするときに同期する必要があることは言うまでもありません。アプリをより多くのサイトに埋め込むときに、このアプローチが拡張されるとは思わない。
より一般的な実装の最初のアイデアは、アプリをAngular 6にアップグレードし、カスタム要素を持つWebコンポーネントを作成することでしたが、ネイティブカプセル化をサポートしないIE11およびEdgeをサポートする必要があります。それが使用されているすべてのサイトでアプリをテストし、スタイルがスタイルを壊していないことを確認する必要があります。また、Webコンポーネントが子ルートを管理できるかどうかもわかりません。
他のアイデアはiframeを使用することですが、ここでの私の問題は、iframe内の「常駐」アプリから「ホスト」アプリに子ルートを追加する方法とコンテンツに合わせたiframeのサイズ変更です。
必要なことを達成するためのより良い方法はありますか？
理想的なソリューションでは、アプリを使用するサイトについて知る必要なく、アプリケーションを複数のサイト（それぞれが特定の構成を提供）で使用できるようにする必要があります。
ご協力いただきありがとうございます。
多くの人が何度も同じ問題を抱えているので、私は最近このトピックで非常に忙しかったです（もちろん私）。最近では、マイクロフロントエンドの概念をよく耳にします。コンセプトは、フロントエンドを拡張可能かつスケーラブルに設計することです。特に、多くの企業がAngularとReactとVue開発者。私の研究から次のアプローチが生まれました。
リンク：
新しいアプリを作成し、レガシーアプリからハイパーリンクを作成できます。 （両方のアプリを切り替えるときにページをリロードする必要があります。）
Iframes：
ソフトウェアアーキテクトは、iframeと単一ページアプリケーションを処理するメタルーターを構築しました。
これを見てください：
Metaframeworks：
Metaframeworksを使用すると、さまざまなフレームワークを使用してビルドされた
differentsアプリ間の通信を行うことができます。
ここで、microfrontendを目的としたメタフレームワークの例を示します。
- シングルスパ （公式Webサイト）シングルスパ：フロントエンドマイクロサービス用のJavaScriptフレームワーク
- FrintJs （公式ウェブサイト）FrintJS：スケーラブルでリアクティブなアプリケーションを構築するためのモジュラーJavaScriptフレームワーク
Webコンポーネント、つまりAngular elements：
Npmパッケージを扱うために、他の回答者が Angular elements の概念に言及したように使用できます。シェルアプリと、シェルアプリの要素として登録される別の独立したアプリを作成する必要があります。この例を見てください： Building micro frontends — angular elements
Mosaiq：レイアウトサービス
オンラインショップZalandoは同じ問題に直面し、問題に対処するためのフレームワークを作成しました。
- Mosaic9 https://www.mosaic9.org/
特にパートTailor.js、Go。
PS。テーラーは、FacebookのBigPipe：高性能のためのWebページのパイプライン化に触発されました。
プラグインアーキテクチャ
プラグインアーキテクチャは、事前にそのコードのすべての詳細を知らなくても、特定の時点で外部コードを呼び出すアーキテクチャです。
このStackoverflowの質問 シングルページアプリケーションの場合の詳細について説明します。
角度ライブラリ
正しい方法は、アプリに同じフレームワークとこのフレームワークの同じバージョン（たとえばAngular 7）を含めることだと思います。私は、AngleのTypeScriptバージョンへのアップグレードに少し時間をかけることを好みます。この答えが他の人にも役立つことを願っています。
その他のStackoverflow関連のQ＆A：
Vue.JS-マイクロフロントエンドアプローチ
マイクロフロントエンドアーキテクチャのアドバイス
マイクロフロントエンドの例
- Angular 8およびReactJS（NodeJSサーバーとMySQLデータベースを使用）： https://github.com/billyjov/angular-react-microfrontend
マイクロフロントエンドに関するリソースのリスト
あなたの問題の解決策はAngular Elementsにあると思います。 angularチームによって提供される非常にクールなものです。
Angular Elementsを使用すると、Angularコンポーネントをcustom web elementsとしてパッケージ化できます。これは、WebプラットフォームAPIのWebコンポーネントセットの一部です。 Webコンポーネントは、再利用可能なencapsulated elementsの作成を支援するテクノロジーです。現在、シャドウDOM、HTMLテンプレート、HTMLインポート、およびカスタム要素が含まれています。カスタム要素テクノロジーは、Angular Elementsを強化します。
Angular Elementsの詳細については、参照リンクをご覧ください。
https://angular.io/guide/elements
https://www.telerik.com/blogs/getting-started-with-angular-elements
ありがとう！
Angular 6 Elementsが非角型アプリの唯一のオプションになると思います。これは、コンポーネントを角度外で実行できる唯一の方法です。
スタイルのカプセル化を維持するために、cssプレフィックスを使用できます。
:Host
コンポーネントの.cssまたは.scssファイル内。
角度以外の要件を削除できる場合は、Angular CDK PortalHostおよびDomPortalHostをお勧めします。