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

Question

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

去年，我们开始在我们的应用程序中使用year作为一些视图。为了加载角度，我们将prod构建文件放置在.net项目中，并将组件加载到aspx母版页中。

我们计划使用微前端架构将我们的休息暂存旧视图迁移到角度。

因此，我也做了一个小poc，并且能够在接近它的地方实现这个体系结构。

我跟踪这个url以实现，并在端口4400上运行它。

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

在我现有的角项目中，我使用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);

    }

这和预期的一样工作，并且我能够在我的dev env中加载customElements。但是对于生产，我真的不知道如何实施。

我感到关切的是：

1. 也必须在prod的某个端口上运行应用程序吗？如果是，如何做到这一点，它是否是动态的，这样用户就有能力改变端口。我们在.net应用程序中的方式。由于客户端可能已经在端口
2. 上运行了一些东西，所以我试图实现的方式是否正确。

提前谢谢。

Answer 1

对那些可能有这样要求的人来说。

我做了很多研究，看了很多文章，然后拿出了一个解决方案。

因此，我使用角元素创建了一个单独的应用程序，并使用cmd生成了单个包；

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

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

在我的web.config文件中，我创建了一个密钥，如果用户更改了端口号，那么他们将直接更新web.config：

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

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

然后我在我的shell应用程序中使用了这个，它的工作原理就像一种魅力。