Как реализовать архитектуру микро-интерфейса в устаревшем приложении с помощью Angular

Недавно наша команда решила внедрить архитектуру микро-интерфейса в наш унаследованный продукт. Он был разработан с использованием aspx-страниц Asp.Net вместе с javascript / jquery.

В прошлом году мы начали использовать angular в нашем приложении для некоторых представлений. Чтобы загрузить angular, мы помещаем файлы сборки prod в проект .net и загружаем компонент на главную страницу aspx.

Мы планируем перенести наши остальные ожидающие более старые представления на angular, используя архитектуру микро-интерфейса.

Так что я сделал небольшой пример того же и смог достичь архитектуры где-то близко к ней.

Я следил за этим 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 в свой dev env. Но что касается производства, я действительно не знаю, как реализовать.

Моя забота:

1. Придется ли мне запускать приложение на каком-то порту в продукте? Если да, то как это сделать, и может ли он быть динамическим, чтобы пользователь мог изменить порт. Как у нас в приложении .net. Поскольку у клиента может быть что-то уже запущенное на этом порту

2. Правильный способ, которого я пытаюсь достичь, или нет.

Заранее спасибо.