Как встроить угловое приложение в другое приложение?
Моя команда разрабатывает приложение angular 5, которое некоторое время находилось в производстве, но недавно нам было поручено заставить приложение работать на других 3 сайтах, которыми владеет компания. Один сайт представляет собой SPA, созданный с помощью Angular6, другой также является SPA, но использует Angular5, а другой использует некоторые старые библиотеки, такие как jQuery.
Руководство хотело, чтобы мы сразу же интегрировались в Angular5 SPA, поэтому мы просто экспортировали все приложение в виде модуля с дочерними маршрутами и позволили другому приложению выполнить загрузку.
Но я боюсь, что вышеупомянутый подход не будет работать для неуглового сайта. Это также тесно связывает оба приложения, так как приложение "host" должно знать обо всех зависимостях нашего приложения, которое не является тривиальным приложением (я бы сказал, довольно большим), и устанавливать их, это вызывало проблемы, когда обоим приложениям требовались разные версии. та же зависимость, не говоря уже о том, что нам нужно будет синхронизировать при обновлении зависимостей или самой платформы. Я не думаю, что этот подход будет масштабироваться при встраивании приложения в большее количество сайтов.
Моя первая идея для более общей реализации состояла в том, чтобы обновить наше приложение до Angular 6 и создать веб-компонент с пользовательским элементом, но нам нужно поддерживать IE11 и Edge, которые не поддерживают встроенную инкапсуляцию, поэтому нам нужно протестировать наше приложение в каждый сайт, на котором он используется, чтобы убедиться, что он не нарушает наши стили, также я не знаю, может ли веб-компонент управлять дочерними маршрутами или нет.
Другая идея заключается в использовании iframe, но моя проблема здесь заключается в изменении размера iframe для адаптации к контенту и в том, как добавить дочерние маршруты в приложении host из приложения resident внутри iframe.
Есть ли лучший способ достичь того, что нам нужно сделать?
Идеальное решение должно позволить нашему приложению использоваться на нескольких сайтах (каждый из которых обеспечивает определенную конфигурацию), и нам не нужно знать о сайте с помощью нашего приложения.
Спасибо за вашу помощь.
3 ответа
В последнее время я был очень занят этой темой, потому что многие снова и снова сталкиваются с одной и той же проблемой (я, конечно). В наше время вы часто слышите понятие микро-интерфейсов. Идея заключается в том, чтобы спроектировать интерфейс как расширяемый и масштабируемый. Особенно в то время, когда во многих компаниях есть разработчики как Angular, так и React и Vue. Следующие подходы вышли из моего исследования:
Ссылки:
Вы можете создать свое новое приложение и получить гиперссылку из своего старого приложения. (Вы должны перезагрузить страницу при переключении между двумя приложениями.)
Iframes:
Архитектор программного обеспечения создал мета-маршрутизатор для работы с iframes и одностраничным приложением:
Взгляните на этот https://github.com/manfredsteyer/meta-router
Метафреймы:
Метафреймы позволяют вам общаться между differents приложения, созданные с использованием разных сред: вот простой пример с идеей одностраничного приложения: https://single-spa.js.org/
Пакеты NPM:
Для того, чтобы иметь дело с пакетами npm, вы можете использовать в качестве другого ответчика упомянутое понятие угловых элементов. Вы должны создать приложение оболочки и другое независимо приложение, которое будет зарегистрировано в качестве элементов в вашем приложении оболочки. Взгляните на этот пример. Построение микро интерфейсов - угловых элементов.
MOSAIQ
Интернет-магазин Zalando столкнулся с той же проблемой и создал основу для решения этой проблемы: https://www.mosaic9.org/
Плагин Архитектура
Угловые библиотеки
Я думаю, что правильный путь - иметь в приложении ту же платформу и ту же версию этой платформы (например, Angular 7). Я предпочитаю потратить время на обновление до машинописной версии angular. Я надеюсь, что ответ может быть полезным для других.
Я думаю, что решение вашей проблемы находится в Angular Elements, Это довольно круто и предоставлено угловой командой.
Angular Elements позволяет упаковать ваши угловые компоненты как 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
Спасибо!
Я считаю, что Angular 6 Elements будет вашим единственным выбором для неугловых приложений. Это единственный известный мне метод, который позволяет выполнять компоненты вне угла.
Чтобы сохранить инкапсуляцию вашего стиля, вы можете использовать префикс css:
:host
в файлах.css или.scss вашего компонента.
Если вы можете избавиться от неуглового требования, я бы порекомендовал Angular CDK PortalHost и DomPortalHost.