最近,我们的团队决定在我们的旧产品中实现微前端架构。它是使用 Asp.Net aspx 页面以及 javascript/jquery 开发的。
去年,我们开始在应用程序中使用 Angular 来处理某些 View 。为了加载 Angular,我们将 prod 构建文件放置在 .net 项目中,并在 aspx 母版页中加载组件。
我们计划使用微前端架构将其余未决的旧 View 迁移到 Angular。
因此,我为此做了一个小型 poc,并且能够实现接近它的架构。
我按照这个网址进行实现并在端口 4400 上运行它。
在我现有的 Angular 项目中,我使用 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。但对于生产我真的不知道如何实现。
我关心的问题:
我是否还必须在产品中的某个端口上运行应用程序?如果是,如何做到这一点以及它是否可以是动态的,以便用户能够更改端口。我们在 .net 应用程序中的方式。由于客户端可能已经在该端口上运行了某些东西
我想要实现的方式是否正确。
提前致谢。
最佳答案
对于那些可能有这样要求的人。
我做了很多研究,浏览了很多文章,最后得出了一个解决方案。
因此,我使用 Angular 元素创建了一个单独的应用程序,并使用 cmd 生成了单个包;
ng build --prod --output-hashing none --single-bundle true
然后我在 IIS 中创建了一个应用程序,并将所有产品生成的文件放在端口 9091 上。您可以使用任何端口。
在我的 web.config 文件中,我创建了一个 key ,这样如果用户更改端口号,他们就会直接更新 web.config:
<add key="MicroFrontEnd" value="http://localhost:9190"/>
由于端口应该是可配置的,所以我创建了一个 api 来获取端口号。
然后我在我的 shell 应用程序中使用了它,它就像一个魅力。
关于c# - 如何使用 Angular 在遗留应用程序中实现微前端架构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60109171/