如何解决单独呈现元素中的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);
}
}
解决方法
是的。有可能的。需要遵守一些基本规则。
- 确保您有2个独立项目,至少在不同的文件夹中
- 让Angular Element项目/文件夹进行打包并在您描述的输出中生成输出,并使用简单的HTML页面对其进行测试。
因此,通常的想法是,当您尝试创建微型前端时,请确保在简单的HTML页面上工作而页面上没有角度JS。这样可以确保您的最终代码对下划线的HTML代码没有任何依赖。
然后在您的主项目中,可以通过将所需的JS文件添加到初始index.html
我在github页面上有一个示例性的角度元素项目,该示例演示了如何在简单的html页面上测试角度元素,并且还具有执行打包的代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。