单独渲染元素中的 Micro UI Angular 问题答案

【问题标题】：Micro UI Angular issue in rendering element seperately单独渲染元素中的 Micro UI Angular 问题
【发布时间】：2020-09-03 16:30:40
【问题描述】：

我正在创建一个微前端应用程序。我在 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);
          }
          
         }

【问题讨论】：

标签： angular angular-elements micro-frontend ngx-build-plus

【解决方案1】：

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

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

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

然后在您的主项目中，您可以通过将所需的 JS 文件添加到初始 index.html 来使用自定义标记作为普通 HTML 标记

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

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

【讨论】：