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

Question

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

1. Разрешить каждому пункту меню быть в другом проекте Bitbucket.
2. Создайте один компонент, не ломая другие.
3. Компоненты могут общаться друг с другом.
4. Если один из компонентов обновляется, все приложения автоматически должны видеть последнюю версию этого компонента.
5. Все команды будут использовать следующие версии:
   • Угловой CLI: 7.0.7
     
   • Узел: 10.13.0
     
   • Угловая: 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), и при нажатии на каждое меню тег динамически создается внутри div main.

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

Если какой-либо команде необходим доступ к веб-сервису, например, для заполнения таблицы, таблица обрабатывается раньше.
Поэтому я делаю запрос в веб-сервисе, а затем динамически создаю тег таблицы и передаю параметр популярному.
В угловом проекте это работает нормально без этой необходимости. Но с элементами 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, так что этот пост будет посвящен именно этому. Вместо использования ng new для создания рабочей области мы хотим использоватьng generate application. Это создаст новое приложение, находящееся рядом с приложением по умолчанию:

ng generate application app1 --routing

ng generate application app2 --routing

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

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

В каталог проектов входят:

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

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