Настройка сборки UI-сервиса

Команды сборки

Для сборки UI-сервиса выполните следующие команды:

# Установка зависимостей проекта
npm install
 
# Сборка UI-сервиса
ng build

💡

Для сборки с конфигурацией под конкретную среду используйте флаг --configuration:

ng build --configuration production

После успешного выполнения в корне проекта появится папка dist, содержащая собранный UI-сервис.

Глобальные стили: в сборке UI-сервиса их не должно быть

Рутовое приложение подключает UI-сервис одним тегом <script src="…/main.js">. Файл styles.css, который Angular собирает из раздела styles в angular.json, при этом никто не запрашивает: стили палитры, тема PrimeNG, primeicons и шрифты уже есть на странице — их отдаёт рутовое приложение. Отдельно от рутового приложения UI-сервис не запускают: при локальной разработке бандл проксируется в рутовое (Добавить прокси), поэтому стили не нужны и в конфигурации development.

Распространённая ошибка — styles.scss с импортами стилей палитры; до 8.2.0 так был устроен и образец, с которого копировали сборку. Проверьте свой src/styles.scss:

src/styles.scss

@import '@diasoft/qpalette-visual/styles';
@import '@diasoft/qpalette-prime/styles';
@import 'primeicons/primeicons.css';

Такой файл собирается в styles.css на полтора мегабайта и тянет за собой все шрифты палитры — ещё шесть мегабайт в образе продукта, которые браузер не загрузит ни разу.

Оставьте раздел styles пустым — во всех конфигурациях, включая development:

angular.json

{
  "architect": {
    "build": {
      "options": {
        "styles": []
      }
    }
  }
}

Стили своих компонентов задавайте в styleUrls — они попадают в бандл вместе с компонентом. Глобальные правила и переопределение стилей палитры или темы в UI-сервисе не допускаются: страница общая, и такое правило доедет до рутового приложения и соседних UI-сервисов. Если для вашей задачи стилей палитры не хватает — оверлей, который рисуется вне компонента, или нужный вариант компонента отсутствует, — заведите запрос на доработку Q.Palette: нужное появится в палитре и будет работать у всех продуктов одинаково.

💡

Проверка после ng build: в dist/<UI-service> нет styles.css и файлов шрифтов (*.woff2, *.woff, *.ttf, *.eot) — стили компонентов лежат внутри main.js и чанков. У тестового проекта Q.Palette это дало 15.95 → 8.71 МБ, у виджета подстановки — 8.96 → 1.37 МБ.

Сборка Docker-образа

💡 Примечание: В командах ниже замените <UI-service> на название вашего сервиса, а <tag> — на желаемую версию образа.

1. Создание Dockerfile

В корне проекта создайте файл Dockerfile со следующим содержимым:

# Базовый образ — релиз Q.Palette с предустановленным Nginx
FROM registry-new.diasoft.ru/release/qpalette:26031911
 
# Копирование собранного UI-сервиса
COPY <UI-service>/dist/<UI-service> app/files/<UI-service>
 
# Копирование дополнительных ассетов из rootapp
COPY <UI-service>/rootapp/assets app/files

2. Сборка образа

Выполните команду сборки из директории, где находится Dockerfile:

docker build -t <UI-service>:<tag> -f Dockerfile .

Пример:

docker build -t my-ui-service:1.0.0 -f Dockerfile .

3. Проверка результата

Убедитесь, что образ успешно создан:

docker images | grep <UI-service>

Структура проекта после сборки

project/
├── dist/                  # Собранный UI-сервис (создаётся после ng build)
├── rootapp/
│   └── assets/            # Дополнительные статические файлы
├── Dockerfile             # Инструкция для сборки образа
└── ...

Переключение языков Тестирование библиотечного PBC