Угловые несколько проектов

Question

Я делаю проверку концепции по следующим критериям:

1. Разрешить каждому пункту меню быть в другом проекте Bitbucket.
2. Создание одного компонента без разрушения других.
3. Компоненты могут взаимодействовать друг с другом.
4. Если один из компонентов обновляется, все приложения автоматически должны видетьпоследняя версия этого компонента.
5. Все команды будут использовать следующие версии:
   • Угловой CLI: 7.0.7
     
   • Узел: 10.13.0
     
   • Angular: 7.0.4
     

Я сделал пример с использованием угловых элементов, расширяющих HTML.
Каждая угловая команда выполняет развертываниесгенерировав файл JavaScript (team1.js, team2.js, team3.js), зарегистрировав его тег.

Пример:

<team1> </ team1>  customElements.define("team1", ....); 
<team2> </ team2>  customElements.define("team2", ....); 
<team3> </ team3>  customElements.define("team3", ....);

Основное приложение Angular, которое имеет меню,импортирует файлы JavaScript (team1.js, team2.js, team3.js) и, при нажатии на каждое меню, тег dynamically создан внутри div main.

menu team1 >> this.renderer.createElement ("team1")
menu team2 >> this.renderer.createElement ("team2")
menu team3 >> this.renderer.createElement ("team3")

Если какой-либо команде необходим доступ к веб-сервису, например, для заполнения таблицы, таблица обрабатывается раньше.
Поэтому я делаю запрос в веб-сервисе, а затемЯ динамически создаю табличный тег и передаю параметр популярному.
В проекте Angular он обычно работает без этой необходимости.Но с элементами Angular я только что получил:

this.data = data returned from webservice
const element = this.renderer.createElement ("component-table");
this.renderer.setProperty (element, "data", this.data);

Все это работает, но мне трудно работать с createElement.

Я мог бы сделать этот запрос веб-сервиса в основном проекте ипройти через параметр:

<team1 data = "data"> </ team1>

При этом все запросы к веб-сервису будут в основном проекте, и всем командам придется кодировать в этом проекте.

1. Есть ли другиевозможности?
2. Можете ли вы продолжать делать это таким образом, но менее сложным способом?

Answer 1

Задача состояла в том, чтобы создать отдельные приложения пользовательского интерфейса, которые можно было бы разрабатывать и развертывать независимо друг от друга, но все же можно объединить в одно устройство для развертывания.Вот как мы это сделали.

Вам понадобится Angular CLI, создайте рабочее пространство Angular:

ng new my-app --routing

и запустите его:

cd my-app

ng serve -o

Создайте свои подпрограммы

Функциональность нескольких приложений теперь запекается непосредственно в Angular CLI, поэтому этот пост будет посвящен этому.Вместо использования ng new для создания рабочей области мы хотим использовать ng generate application.Это создаст новое приложение, расположенное прямо рядом с приложением по умолчанию:

ng generate application app1 --routing

ng generate application app2 --routing

Это, вероятно, похоже на то, что вы ожидаете от проекта Angular:

• e2e: для End toКонечные тесты
• node_modules: все пакеты, которые должны были быть установлены для запуска приложения.
• src: источник основного приложения
• src / app: основной код приложения.
• src / assets: папка ресурсов для основного приложения
• src / сред: конфигурации среды

Каталог проектов включает в себя:

app1: исходный код вашего первого пользовательского дополнительного приложения

• app1 / app: исходный код для app1.
• app1 / assets Ресурсы для app1.
• app1 / Environment: Конфигурации среды для app1.
• app1-e2e: Сквозное тестирование для app1.
• app2: Исходный код вашего второго пользовательского дополнительного приложения.
• app2 / app: исходный код для app2.
• app2 / assets Ресурсы для app2.
• app2 / environment: настройки среды для app2.

Для запуска одного из вспомогательных приложений вы просто используете проектаргумент ng serve, например:

ng serve –-project app1

вся статья здесь