マイクロフロントエンド アプリケーションを作成しています。 Angular のコンテナ アプリケーションがあります。子アプリケーションのセレクターをコンテナー アプリケーションに挿入すると、機能します。ただし、URL にアクセスしたときに子アプリケーションを単独で実行する必要があります。ブートストラップでAppcomponentを指定することで可能になります(bootstrap:[AppComponent])。ただし、マイクロフロントエンドを使用する場合は、entryComponent を使用します。両方を使用しようとすると競合が発生します。マイクロ UI コンセプトの機能を維持しながら、各アプリケーションを独立して実行できる方法はありますか?
bootstrap: [],
entryComponents:[
ShareDetailsComponent
]
})
export class AppModule {
constructor(private injector: Injector){
}
ngDoBootstrap() {
const myCustomElement = createCustomElement(ShareDetailsComponent, { injector: this.injector });
customElements.define('app-share-details', myCustomElement);
}
}
------------------------
はい。それは私です可能です。従う必要のある基本ルールがいくつかあります。
少なくとも異なるフォルダーに 2 つの独立したプロジェクトがあることを確認してください。
Angular Element プロジェクト/フォルダーにパッケージ化を実行させ、記述された出力で出力を生成し、単純な HTML ページでテストさせます。
したがって、一般的な考え方は、マイクロ フロントエンドを作成しようとするときは、ページ上に angular JS を使用せずに、単純な HTML ページ上でそれが動作するようにしてください。これにより、最終的なコードが下線の HTML コードに依存しないようになります。
その後、メイン プロジェクトで、必要な JS ファイルを初期のindex.html に追加することで、カスタム タグを通常の HTML タグとして使用できます。
私の github ページに angular 要素プロジェクトの例があり、angular el を使用する方法をデモしています。要素は単純な HTML ページでテストされており、パッケージ化を行うコードも含まれています。
https://github.com/reflexdemon/angular10-webcomponent
