How to implement micro frontend architecture in legacy application using Angular

Question

Recently our team has decided to implement micro front end architecture in our legacy product. It has been developed using Asp.Net aspx pages along with javascript/jquery.

Last year we started using angular in our application for some of the views. To load angular we are placing the prod build files in .net project and we are loading the component in aspx master page.

We are planning to migrate our rest pending older views to angular using micro front end architecture.

So I did a small poc for the same and was able to achieve the architecture to somewhere close to it.

I followed this url for implementation and ran it on port 4400.

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

And in my existing angular project i am loading this using 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);

    }

And this works as expected and I am able to load customElements in my dev env. But for production I am really not sure how to implement.

My concern:

1. Will I have to run app on some port in prod as well? If yes how to do that and can it be dynamic such that user has ability to change the port. The way we have in .net application. Since client may have something already running on that port

2. The way I am trying to achieve is correct or not.

Thanks in advance.

Answer 1

For those who might have requirement like this.

I did lot of research and went through lot of articles and came out with a solution.

So I created a separate application using Angular elements and generated single bundle using cmd;

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

then I created an application in IIS and placed all the prod generated files in it on port 9091. You can use any port for that.

In my web.config file I created a key such that if user changes the port number then they directly update web.config:

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

Since port should be configurable so I created an api to fetch the port number.

Then I used this in my shell app and it works like a charm.