Continuous Integration с Angular

Continuous Integration (CI) — процесс автоматической сборки, тестирования и проверки кода при каждом изменении, что особенно важно для проектов на Angular, где множество модулей и компонентов тесно взаимодействуют.

Настройка CI для Angular

  1. Выбор CI-инструмента Популярные решения включают GitHub Actions, GitLab CI/CD, CircleCI, Jenkins. Все они поддерживают Node.js, что критично для Angular.

  2. Установка зависимостей CI-скрипт должен установить необходимые пакеты с помощью npm ci или yarn install --frozen-lockfile для воспроизводимой сборки.

steps:
  - uses: actions/checkout@v3
  - name: Install dependencies
    run: npm ci
  1. Сборка проекта Angular CLI предоставляет команду ng build --prod для продакшн-сборки:
- name: Build Angular App
  run: npm run build -- --prod

Важно включать флаг --prod, чтобы CI проверял релизную сборку, а не девелоперскую.

  1. Запуск тестов Юнит-тесты выполняются через ng test --watch=false --browsers=ChromeHeadless. End-to-end тесты используют ng e2e с Protractor или Cypress.
- name: Run Unit Tests
  run: npm run test -- --watch=false --browsers=ChromeHeadless
  1. Статический анализ и линтинг Angular поддерживает TSLint или ESLint для проверки кода. В CI это помогает предотвращать ошибки стиля и потенциальные баги.
- name: Lint Code
  run: npm run lint

Интеграция с деплоем

После успешной сборки и прохождения тестов можно автоматически деплоить приложение:

  • Firebase Hosting: firebase deploy --only hosting
  • Netlify: автоматический деплой при пуше в main ветку
  • Docker: сборка Docker-образа и отправка в registry

Практические рекомендации

  • Использовать кэширование node_modules для ускорения CI.
  • Разделять юнит-тесты и e2e-тесты на отдельные шаги.
  • Настраивать уведомления при падении сборки.
  • Прогонять prod-сборку в CI, чтобы выявлять ошибки оптимизации и tree-shaking.

CI позволяет поддерживать стабильность проекта, уменьшает количество ошибок при интеграции новых функций и обеспечивает предсказуемость сборки для всех участников команды.

Оглавление