0

我正在创建一个微前端应用程序。我在 Angular 中有一个容器应用程序。当我将子应用程序的选择器注入到容器应用程序中时，它正在工作。但是当我点击 URL 时，我需要单独运行子应用程序。通过在 bootstrap (bootstrap: [AppComponent]) 中指定 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);
          }
          
         }
4

1 回答 1

0

是的。有可能的。有一些基本规则需要遵守。

  1. 确保您有 2 个独立的项目，至少在不同的文件夹中
  2. 让 Angular Element 项目/文件夹进行打包并在您描述的输出中生成输出，并使用简单的 HTML 页面对其进行测试。

因此，一般的想法是，当您尝试创建微前端时，请确保在页面上没有 Angular JS 的简单 HTML 页面上工作。这将确保您的最终代码不依赖于下划线的 HTML 代码。

然后在您的主项目中，您可以通过将所需的 JS 文件添加到初始index.html

我的 github 页面上有一个示例角度元素项目，该项目演示了如何在简单的 html 页面上测试角度元素，并且还有代码来进行打包。

https://github.com/reflexdemon/angular10-webcompponent

于 2020-09-12T13:12:09.417 回答