Каковы некоторые способы использования наших компонентов Angular в проекте Angular другого приложения?

#angular #openshift

#angular #openshift

Вопрос:

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

Здесь присутствует много бюрократии, что усложняет задачу, когда другая команда хочет, чтобы наша команда была как можно более изолирована. У нас есть среда разработки, тестирования и производства OpenShift, и они имеют то же самое. Наши виджеты настолько сложны, что они не захотели бы заниматься их разработкой самостоятельно.

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

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

Другой идеей было функциональное ответвление от их проекта angular, которое мы разместили бы в нашей среде разработки OpenShift, но никогда не продвигали бы в нашу тестовую или производственную среду OpenShift, вместо этого мы объединили бы в их ветку разработки, и она прошла бы по их конвейеру CI / CD, чтобы перейти в их OpenShift development / test, а затем вручную была передана в prod. Однако это потребовало бы большой координации между нашими командами из-за регулярного слияния нашего кода и опасений, что наш код нарушит их конвейер CI / CD, и они не смогут приступить к продвижению к разработке из-за того, что наш код не проходит тесты и т.д.

Кроме этого, существуют ли какие-либо функции Angular или OpenShift, где мы могли бы внедрить наш компонент (возможно, даже в виде HTML) в их проект Angular? Очевидно, что любое решение потребует координации между нашими командами, но мы предпочитаем, чтобы они:

  • Не требует, чтобы мы имели доступ к окружениям OpenShift друг друга
  • Согласование не требуется чаще, чем раз в месяц или около того
  • Они не участвуют в циклах выпуска друг друга
  • Не влияют на конвейеры CI / CD других команд
  • Начальная настройка инфраструктуры может быть большой

Комментарии:

1. Создайте библиотеку компонентов и повторно используйте ее.

2. google.com/search ? q= как создать библиотеку компонентов angular

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

Ответ №1:

Поскольку вы хотите исключить библиотеки npm, альтернативой было бы предоставить ваши виджеты в CDN, откуда целевое приложение извлекает ваши скрипты. Обычно такие скрипты должны быть версионными, но в вашем случае «последняя» версия, вероятно, была бы менее проблематичной.

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

Возможно, это можно было бы сделать немного более надежным, используя веб-компоненты (угловые элементы) с Shadow DOM.