Если ты админ, который разворачивает Angular-приложения на серверах, то Angular CLI — это твой главный друг. Эта штука не только упрощает разработку, но и делает деплой максимально предсказуемым. Сегодня разберём, как правильно настроить окружение, автоматизировать сборку и не наступить на грабли при развёртывании на VPS или выделенном сервере.

🔧 Как это работает под капотом

Angular CLI работает как обёртка над webpack, но с кучей предустановок и автоматизации. Основные компоненты:

• Webpack 5 — bundler, который собирает всё в кучу
• TypeScript компилятор — превращает TS в JS
• Sass/Less процессор — для стилей
• Karma + Jasmine — для тестов
• Protractor/Cypress — для e2e тестов
• Tree-shaking — выкидывает неиспользуемый код

Вся магия происходит через angular.json, который является центральным конфигом проекта. CLI считывает этот файл и понимает, как собирать, тестировать и деплоить приложение.

📦 Быстрая установка и настройка

Начнём с нуля. Сначала ставим Node.js (минимум 14.15.0, рекомендую 16+):

# Проверяем версию Node.js
node --version

# Устанавливаем Angular CLI глобально
npm install -g @angular/cli

# Проверяем установку
ng version

# Создаём новый проект
ng new my-app --routing --style=scss

# Переходим в папку проекта
cd my-app

# Запускаем dev-сервер
ng serve

Для продакшена добавляем несколько полезных пакетов:

# Для работы с окружениями
npm install --save-dev dotenv

# Для анализа бандла
npm install --save-dev webpack-bundle-analyzer

# Для прогрессивного веб-приложения
ng add @angular/pwa

🚀 Основные команды для админов

Вот команды, которые ты будешь использовать постоянно:

# Сборка для разработки
ng build

# Сборка для продакшена (минификация + оптимизация)
ng build --prod

# Сборка с анализом бандла
ng build --prod --stats-json
npx webpack-bundle-analyzer dist/my-app/stats.json

# Линтинг кода
ng lint

# Запуск тестов
ng test --watch=false --browsers=ChromeHeadless

# E2E тесты
ng e2e

# Обновление Angular
ng update @angular/core @angular/cli

# Генерация компонентов
ng generate component my-component
ng generate service my-service
ng generate module my-module

⚙️ Настройка окружений

Создаём файлы окружений в src/environments/:

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com',
  version: '1.0.0'
};

// environment.staging.ts
export const environment = {
  production: false,
  apiUrl: 'https://staging-api.myapp.com',
  version: '1.0.0-staging'
};

Регистрируем в angular.json:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

🎯 Оптимизация для продакшена

Параметр	Описание	Команда
AOT компиляция	Ahead-of-Time компиляция	ng build –aot
Tree-shaking	Удаление неиспользуемого кода	ng build –prod
Минификация	Сжатие JS/CSS	ng build –prod
Gzip сжатие	Дополнительное сжатие	ng build –prod –optimization
Lazy loading	Подгрузка модулей по требованию	ng generate module –route

🔥 Полезные хаки и автоматизация

Создаём build.sh скрипт для автоматизации:

#!/bin/bash

# Очищаем старые сборки
rm -rf dist/

# Устанавливаем зависимости
npm ci

# Запускаем тесты
npm run test:headless

# Собираем для продакшена
ng build --prod --source-map=false

# Создаём архив для деплоя
tar -czf deploy.tar.gz dist/

echo "Build completed successfully!"

Добавляем в package.json:

"scripts": {
  "build:prod": "ng build --prod",
  "build:staging": "ng build --configuration=staging",
  "test:headless": "ng test --watch=false --browsers=ChromeHeadless",
  "bundle-report": "ng build --prod --stats-json && npx webpack-bundle-analyzer dist/my-app/stats.json"
}

📊 Сравнение с альтернативами

Решение	Плюсы	Минусы	Подходит для
Angular CLI	Из коробки, много автоматизации	Менее гибкий, больше размер	Корпоративные проекты
Webpack + custom	Полный контроль, гибкость	Много настроек, время на конфиг	Опытные команды
Vite	Быстрая сборка, HMR	Новый, меньше плагинов	Небольшие проекты
Nx	Монорепозитории, кеширование	Сложность настройки	Большие организации

🐛 Типичные проблемы и их решения

Проблема: Медленная сборка на больших проектах

Решение:

# Включаем инкрементальную сборку
ng build --watch

# Или настраиваем кеширование в angular.json
"cli": {
  "cache": {
    "enabled": true,
    "path": ".angular/cache"
  }
}

Проблема: Большой размер бандла

Решение:

# Анализируем бандл
ng build --prod --stats-json
npx webpack-bundle-analyzer dist/my-app/stats.json

# Включаем lazy loading для модулей
ng generate module feature --route feature --module app.module

Проблема: Ошибки TypeScript при сборке

Решение:

# Пропускаем проверку типов (не рекомендуется для прода)
ng build --prod --skip-type-check

# Или настраиваем tsconfig.json более строго
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}

🎨 Интересные возможности

Schematics — создание собственных генераторов кода:

# Создаём свою коллекцию schematics
npm install -g @angular-devkit/schematics-cli
schematics blank --name my-schematics

# Генерируем компонент со своим шаблоном
ng generate my-schematics:component

Builders — кастомные задачи сборки:

# Создаём кастомный builder
ng generate @angular-devkit/architect:builder my-builder

Интеграция с Docker:

# Dockerfile для Angular приложения
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN ng build --prod

FROM nginx:alpine
COPY --from=builder /app/dist/my-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

🔗 Полезные ссылки

• Официальная документация Angular CLI
• GitHub репозиторий Angular CLI
• Документация Webpack
• TypeScript документация

📈 Статистика и факты

• Angular CLI используется в 89% Angular проектов (по данным Stack Overflow Survey 2023)
• Средний размер бандла Angular приложения — 130-250 KB (gzipped)
• Time to Interactive можно снизить на 40% с правильной настройкой lazy loading
• Angular CLI поддерживает более 50 официальных schematics

🎯 Заключение и рекомендации

Angular CLI — это не просто инструмент для разработчиков, это мощный инструмент для админов, который позволяет стандартизировать процесс сборки и деплоя. Особенно полезен для:

• Корпоративных проектов — где важна стабильность и предсказуемость
• CI/CD пайплайнов — благодаря консистентным командам
• Командной работы — единые стандарты для всех
• Автоматизации — легко интегрируется в скрипты

Не забывай про мониторинг производительности и регулярное обновление зависимостей. Angular CLI регулярно обновляется, и каждая версия приносит новые оптимизации.

Для деплоя рекомендую использовать контейнеризацию с Docker и настроить nginx для отдачи статики. Это даст максимальную производительность и гибкость в настройке.

---

В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.

Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.