Как реализовать архитектуру микро-интерфейса в унаследованном приложении, используя Angular - PullRequest
Новая
       27

Как реализовать архитектуру микро-интерфейса в унаследованном приложении, используя Angular

3 голосов
/ 07 февраля 2020

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

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

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

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

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

Моя проблема:

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

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

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

1 Ответ

3 голосов
/ 28 февраля 2020

Для тех, у кого может быть такое требование.

Я провел много исследований, просмотрел множество статей и нашел решение.

Поэтому я создал отдельное приложение, используя элементы Angular, и сгенерировал один пакет, используя 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 для получения номера порта.

Тогда я использовал это в моем приложении оболочки, и он работает как шарм.

...