单独呈现元素中的Micro UI Angular问题

问题描述

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

解决方法

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

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

因此，通常的想法是，当您尝试创建微型前端时，请确保在简单的HTML页面上工作而页面上没有角度JS。这样可以确保您的最终代码对下划线的HTML代码没有任何依赖。

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

中，将自定义标签用作普通的HTML标签。

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

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