Как встроить угловое приложение в другое приложение? - PullRequest
0 голосов
/ 02 октября 2018

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

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

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

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

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

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

Спасибо!

0 голосов
/ 09 октября 2018

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

Ссылки :

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

Iframes :

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

Metaframeworks :

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

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

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

Mosaiq: Макет сервиса

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

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

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

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

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

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

библиотеки Angular

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

Прочие вопросы и ответы, связанные со Stackoverflow :

Vue.JS - микро-интерфейс
Рекомендации по архитектуре микро-интерфейса

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

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

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

0 голосов
/ 06 октября 2018

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

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

:host

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...