Мигрировать Angular проект в вебкомпонент

Веб-компонент в среде Q.Palette — это ваше приложение с обёрткой Q.Palette, которая позволяет взаимодействовать с рутовым приложением.

Перед тем как начать, выполните все пункты из раздела - С чего начать.

Так же необходимо ознакомиться с статьями - (миграция на 7 qpalette (opens in a new tab)) по переходу на (single bundle (opens in a new tab))

Превращение своего Angular-приложения в веб-компонент Q.Palette

Для скачивания библиотек Q.Palette на локальной машине необходимо подключить репозиторий командой:

npm config set registry http://frontnexus.diasoft.ru:8081/repository/npm-all-group/

Переведите ваше приложение на Angular 17.3.7 (подробная инструкция (opens in a new tab)):

ng update @angular/cli@12 @angular/core@12

Затем выполните эту команду в корне вашего веб-компонента:

ng add @diasoft/qpalette-updater@latest

Команда спросит, что вы хотите сделать. Если сейчас этот проект использует старую версию Q.Palette, выберете опцию "Выполнить апгрейд с Q.Palette 3 на Q.Palette 5".

Создание своего проекта с нуля

Выполните команду

ng new --collection=@diasoft/qpalette-updater

После ввода команды необходимо ввести название вашего проекта (например, my-component), название сервиса, которому принадлежит этот компонент (например, my-service). Далее доступна установка npm-зависимости прямо сейчас, тогда создастся angular-проект.

Далее необходимо перейти в директориюmy-service/my-componentи выполнить команду

ng add @diasoft/qpalette-updater@latest

Выберите опцию "Превратить приложение в веб-компонент", после чего добавится всё необходимое для запуска приложения в среде Q.Palette.

После выполнения команд должна получиться следующая структура:

О настройке конфигурирования образа рутового приложения читайте в данном разделе.