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

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

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

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

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

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

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

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

Спасибо за вашу помощь.


angular architecture iframe single-page-application micro-frontend
person Jorge Riv    schedule 02.10.2018    source источник
comment
Должен ли приложение быть на том же URL-адресе? Нужен ли ему тот же стиль, что и хост-приложению? Это авторизованное приложение? Поддерживает ли он систему единого входа?   -  person r2018    schedule 09.10.2018
comment
Да, в идеале приложение должно находиться на том же URL-адресе, но нам нужно контролировать его часть. Например. Это контролируется основным приложением -> companysite.com/myapp наше приложение должно управлять дочерним маршрутом: companysite.com/myapp/this/portion/is/ours Приложение аутентифицируется на одном сайте, но на других аутентификация необязательна, анонимные пользователи в порядке. Мы не контролируем аутентификацию на каком-либо сайте, и аутентификация работает по-разному на каждом сайте, например, на одном сайте это может быть файл cookie, а на другом — авторизация: токен на предъявителя.   -  person Jorge Riv    schedule 10.10.2018

Ответы (3)


arrow_upward
38
arrow_downward

ОБНОВЛЕНИЕ 2020

Вы также можете использовать новую федерацию модулей Webpack 5.

следующие примеры показывают, как использовать объединение модулей с Angular и другими технологиями.

Исходный ответ

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

Ссылки :

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

Интерфейсы:

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

Метафреймворки:

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

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

Чтобы иметь дело с пакетами npm, вы можете использовать, как другой ответчик упомянул концепцию элементов Angular. Вы должны создать приложение-оболочку и другие независимые приложения, которые будут зарегистрированы как элементы в вашем приложении-оболочке. Взгляните на этот пример.: Создание микроинтерфейсов — угловые элементы< /а>

Mosaiq: сервис макетов

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

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

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

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

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

Этот вопрос о Stackoverflow поясняет больше об этом в случае одностраничного приложения:

Библиотеки Angular

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

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

Vue.JS — подход к микроинтерфейсу
Советы по архитектуре внешнего интерфейса

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

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

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

person billyjov    schedule 09.10.2018

arrow_upward
12
arrow_downward

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

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

Спасибо!

person Shreenil Patel    schedule 08.10.2018
comment
Только Chrome, Safari и Opera поддерживают его изначально. Подробности: angular.io/guide/elements#browser-support-for- пользовательские элементы - person Krishna Mohan; 09.10.2018
comment
Да, я видел угловые элементы, но они изначально не работают в IE11 или Edge. Это проблема, потому что несобственная инкапсуляция позволяет фильтровать стили из родительского приложения, а как насчет маршрутизации? - person Jorge Riv; 10.10.2018
comment
Да, это правда @JorgeRiv, но они постоянно улучшают его день ото дня. Таким образом, есть шансы, что будет добавлено много функций! Может быть и маршрутизация. - person Shreenil Patel; 10.10.2018
comment
Согласно ссылке на документ, angular теперь указан как «Edge (на основе Chromium)» как изначально поддерживаемый браузер. - person Paramvir Singh Karwal; 25.05.2020

arrow_upward
0
arrow_downward

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

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

:host

в файлах .css или .scss вашего компонента.

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

person JBoothUA    schedule 06.10.2018
comment
Да, это предотвратит утечку стилей изнутри элемента наружу, но не предотвратит утечку стилей извне в компонент, по крайней мере, не с неродной инкапсуляцией, а IE11 и Edge не поддерживают родную инкапсуляцию. - person Jorge Riv; 10.10.2018
comment
а как быть с роутингом?? - person Humble Dolt; 18.03.2019