最近我们的团队决定在我们的遗留产品中实现微前端架构。它是使用 Asp.Net aspx 页面和 javascript/jquery 开发的。
去年我们开始在我们的应用程序中使用 Angular 来获取一些视图。为了加载 angular,我们将 prod 构建文件放在 .net 项目中,并且我们在 aspx 母版页中加载组件。
我们计划使用微前端架构将我们剩余的未决旧视图迁移到 Angular。
因此,我为此做了一个小型 poc,并且能够将架构实现到接近它的某个地方。
我按照这个 url 执行并在端口 4400 上运行它。
在我现有的角度项目中,我正在使用 customElements 加载它
this.appendCustomElementWithUrls('app-positions','http://localhost:4400/main-es5.js', (<HTMLElement>document.getElementById("chartAppContainerNamInqA")) );
appendCustomElementWithUrls(name: string,url: string,target: HTMLElement){
if (!customElements.get(name)) {
const script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
}
const component = document.createElement(name);
target.appendChild(component);
}
这可以按预期工作,我可以在我的开发环境中加载 customElements。但是对于生产我真的不确定如何实施。
我的顾虑:
我是否也必须在 prod 的某个端口上运行应用程序?如果是,如何做到这一点,它是否可以是动态的,以便用户能够更改端口。我们在 .net 应用程序中的方式。由于客户端可能已经在该端口上运行了一些东西
我试图实现的方式是否正确。
提前致谢。