如何使用 Angular 在遗留应用程序中实现微前端架构

Question

最近我们的团队决定在我们的遗留产品中实施微前端架构。它是使用 Asp.Net aspx 页面和 javascript/jquery.

开发的

去年我们开始在我们的应用程序中使用 angular 来获取一些视图。要加载 angular，我们将 prod 构建文件放在 .net 项目中，并将组件加载到 aspx 母版页中。

我们计划使用微前端架构将其余未决的旧视图迁移到 angular。

所以我为此做了一个小的 poc，并且能够实现接近它的架构。

我按照这个 url 进行实施，运行它在端口 4400 上。

https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

在我现有的 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 应用程序中的方式。由于客户端可能已经运行在该端口上
我尝试实现的方法是否正确。

提前致谢。

Answer 1

对于那些可能有这样需求的人。

我做了很多研究并阅读了很多文章并提出了解决方案。

所以我使用 Angular 元素创建了一个单独的应用程序，并使用 cmd 生成了单个包；

ng build --prod --output-hashing none --single-bundle true

然后我在 IIS 中创建了一个应用程序，并将产品生成的所有文件放在端口 9091 上。您可以为此使用任何端口。

在我的 web.config 文件中，我创建了一个密钥，这样如果用户更改端口号，他们就会直接更新 web.config:

<add key="MicroFrontEnd" value="http://localhost:9190"/>

由于端口应该是可配置的，所以我创建了一个 api 来获取端口号。

然后我在我的 shell 应用程序中使用了它，它非常有用。

如何使用 Angular 在遗留应用程序中实现微前端架构

How to implement micro frontend architecture in legacy application using Angular

c#

asp.net-mvc

.net-core

angular

micro-frontend