Angular несколько проектов

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

Angular несколько проектов

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

Я сделал пример с использованием элементов Angular, расширяющих HTML.
Каждая команда angular выполняет развертывание, создавая файл 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.

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

Если какой-либо группе требуется доступ к веб-сервису, например, для заполнения таблицы, таблица будет отображаться раньше. Поэтому я делаю запрос в веб-сервисе, а затем динамически создаю тег таблицы и передаю параметр в Popular.
В проекте 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. Можете ли вы продолжать делать это так, но менее сложным способом?

Вы видели это: nrwl.io/nx/guide-nx-workspace Они проделали большую работу в этой области и имеют полностью продуманное решение с использованием библиотек Angular.

DeborahK 18.12.2018 19:22
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
1
3 297
1

Ответы 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

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

Другие вопросы по теме