как встроить угловое приложение в другое приложение?

Моя команда разработала приложение с угловым 5, которое было в производстве некоторое время, но недавно нам было поручено создать приложение на других 3 сайтах, которыми владеет компания. Один сайт - это SPA, построенный с помощью Angular6, другой - также SPA, но использует Angular5, в то время как другой использует некоторые старые библиотеки, такие как jQuery.

Менеджмент хотел, чтобы мы сразу интегрировались с Angular5 SPA, поэтому мы просто экспортировали все приложение в виде модуля с дочерними маршрутами, а другое приложение выполнило загрузку.

Но я боюсь, что вышеупомянутый подход не будет работать для негласного сайта. Это также тесно связано с обоими приложениями, поскольку приложение "хост" должно знать обо всех зависимостях нашего приложения, которое не является тривиальным приложением (я бы сказал, довольно большой) и установить их, что вызвало проблемы, когда для обоих приложений нужны разные версии той же зависимости, не говоря уже о том, что нам нужно будет синхронизировать при обновлении зависимостей или самой структуры. Я не думаю, что этот подход будет масштабироваться при встраивании приложения в другие сайты.

Моя первая идея для более общей реализации заключалась в том, чтобы обновить наше приложение до Angular 6 и создать веб-компонент с настраиваемым элементом, но нам нужно поддерживать IE11 и Edge, которые не поддерживают встроенную инкапсуляцию, поэтому нам нужно будет протестировать наше приложение в каждый сайт, где он используется, чтобы убедиться, что они не нарушают наши стили, также я не знаю, может ли веб-компонент управлять дочерними маршрутами или нет.

Другая идея заключается в использовании iframe, но моя проблема заключается в изменении размера iframe для адаптации к контенту и о том, как добавить дочерние маршруты в приложение "host" из "резидентного" приложения внутри iframe.

Есть ли лучший способ достичь того, что нам нужно делать?

Идеальное решение должно позволить нашему приложению использоваться на нескольких сайтах (каждый из которых обеспечивает определенную конфигурацию), без необходимости знать о сайте с помощью нашего приложения.

Ответы

Ответ 1

В последнее время я был очень занят этой темой, потому что многие снова и снова сталкиваются с одной и той же проблемой (я, конечно). В наше время вы часто слышите понятие микро-интерфейсов. Идея заключается в том, чтобы спроектировать интерфейс как расширяемый и масштабируемый. Особенно в то время, когда во многих компаниях есть разработчики как Angular, так и React и Vue. Следующие подходы вышли из моего исследования:

Ссылки:

Вы можете создать свое новое приложение и получить гиперссылку из своего старого приложения. (Вы должны перезагрузить страницу, когда вы переключаетесь между обоими приложениями.)

Iframes:

Архитектор программного обеспечения создал мета-маршрутизатор для работы с iframes и одностраничным приложением:
Взгляните на это:

(репозиторий github) Легкий и надежный подход к микро-интерфейсам (SPA/клиенты для микро-услуг)

Метафреймы:

Metaframeworks позволяет вам поддерживать связь между differents приложениями, созданными с использованием различных структур:
Вот несколько примеров метафреймов для целей микро- интерфейса.

Веб-компоненты, т.е. угловые элементы:

Для того, чтобы иметь дело с пакетами npm, вы можете использовать в качестве другого ответчика упомянутое понятие угловых элементов. Вы должны создать приложение оболочки и другое независимо приложение, которое будет зарегистрировано в качестве элементов в вашем приложении оболочки. Взгляните на этот пример. Построение микро интерфейсов - угловых элементов.

Mosaiq: макетная служба

Интернет-магазин Zalando столкнулся с той же проблемой и создал платформу для решения этой проблемы:

Мозаика9 https://www.mosaic9.org/

Особенно Tailor.js, система с открытым исходным кодом для сборки компонентов по требованию на внутреннем слое, написанном на Go.

PS. Tailor был вдохновлен BigPipe: конвейеризация веб-страниц для высокой производительности от Facebook.

Плагин Архитектура

Архитектура плагинов - это архитектура, которая будет вызывать внешний код в определенных точках, не зная заранее всех деталей этого кода.

fooobar.com/questions/106996/... объясняет больше об этом в случае одностраничного приложения:

Угловые библиотеки

Я думаю, что правильный способ - иметь в приложении ту же платформу и ту же версию этой платформы (например, Angular 7). Я предпочитаю потратить время на обновление до машинописной версии angular. Я надеюсь, что ответ может быть полезным для других.

Другие вопросы и ответы, связанные с Stackoverflow:

Vue.JS - микро-интерфейс
Микро интерфейс архитектуры совет

Примеры микро-интерфейсов

Angular 8 и ReactJS (с использованием сервера NodeJS и базы данных MySQL): https://github.com/billyjov/angular-react-microfrontend

Список ресурсов о микро-интерфейсах

https://github.com/billyjov/microfrontend-resources

Ответ 2

Я думаю, что решение вашей проблемы находится в Angular Elements. Это довольно круто и предоставлено угловой командой.

Angular Elements позволяет упаковать ваши Angular-компоненты в виде custom web elements, которые являются частью набора веб-компонентов API веб-платформы. Веб-компоненты - это технологии, помогающие создавать повторно используемые encapsulated elements. Прямо сейчас это включает в себя теневой DOM, шаблоны HTML, импорт HTML и пользовательские элементы. Технология нестандартных элементов обеспечивает возможности Angular Elements.

Вот несколько справочных ссылок, по которым вы можете узнать больше об Angular Elements.

https://angular.io/guide/elements

https://www.telerik.com/blogs/getting-started-with-angular-elements

Спасибо!

Ответ 3

Я считаю, что Angular 6 Elements станет вашим единственным вариантом для не угловых приложений. Это единственный метод, который я знаю о том, что позволяет выполнять компоненты вне углового.

Чтобы поддерживать инкапсуляцию стиля, вы можете использовать префикс css:

:host

в ваших файлах.css или.scss.

Если вы можете избавиться от негласных требований, я бы рекомендовал Angular CDK PortalHost и DomPortalHost.