Angular Front-end Инженер

Angular Front-end Инженер

Роадмап навыков для прокачки

Команды ng serve и ng build

Angular → Build & Optimization → Angular CLI

Основная идея

ng serve запускает локальный сервер разработки с hot reload, а ng build собирает приложение для production. Это два ключевых workflow команды Angular CLI: разработка и деплой.

Ключевые аспекты

  • ng serve — запускает dev-сервер на localhost:4200 с автоматической перезагрузкой при изменениях
  • ng build — компилирует приложение в папку dist/ для развёртывания на сервере
  • Hot reload — изменения в коде автоматически отображаются в браузере без перезагрузки страницы
  • Production build — флаг --configuration production включает оптимизации (minification, tree-shaking, AOT)
  • Source maps — в dev-режиме генерируются для отладки в DevTools

Плюсы

  • Быстрый цикл разработки благодаря hot reload
  • Production-сборка оптимизирована из коробки
  • Поддержка proxy для обхода CORS при разработке
  • Встроенная поддержка environments (dev, prod, staging)

Минусы

  • ng serve не подходит для production (только для разработки)
  • Первый запуск может быть медленным на больших проектах
  • Build-время увеличивается с ростом проекта

Частые ошибки на собеседованиях

  • Путают ng serve и ng build (serve — для разработки, build — для деплоя)
  • Забывают про флаг --configuration production при сборке
  • Не знают, что ng serve по умолчанию использует JIT-компиляцию, а ng build --prod — AOT
  • Не упоминают про hot reload и live reload

Введение и проблематика

Разработка Angular-приложения состоит из двух основных этапов: написание кода и его развёртывание. Для каждого этапа Angular CLI предоставляет специализированные команды.

ng serve — для разработки (быстрая обратная связь, hot reload). ng build — для production (оптимизированный бандл для деплоя).

Какую проблему решают?

  • ng serve: устраняет необходимость вручную перезапускать сервер после каждого изменения
  • ng build: создаёт оптимизированную сборку, готовую к развёртыванию на любом веб-сервере

ng serve — сервер разработки

Базовое использование

bash
ng serve
# или сокращённо
ng s

По умолчанию приложение доступно по адресу http://localhost:4200.

Как работает

graph LR A[Изменение файла] --> B[Webpack обнаруживает] B --> C[Пересборка модуля] C --> D[Hot Module Replacement] D --> E[Браузер обновляется]

Angular CLI использует webpack-dev-server, который хранит бандл в памяти для максимальной скорости пересборки.

Полезные флаги ng serve

bash
# Указать порт
ng serve --port 3000
 
# Открыть браузер автоматически
ng serve --open
# или
ng serve -o
 
# Указать хост (для доступа из сети)
ng serve --host 0.0.0.0
 
# Использовать HTTPS
ng serve --ssl
 
# Отключить hot reload (только live reload)
ng serve --no-hmr
 
# Использовать конфигурацию production
ng serve --configuration production

Proxy для API-запросов

При разработке frontend и backend часто находятся на разных портах. Proxy помогает избежать CORS-проблем.

Создайте файл proxy.conf.json:

json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}
bash
ng serve --proxy-config proxy.conf.json

Теперь запросы на /api/* будут перенаправляться на http://localhost:3000/api/*.

ng build — сборка приложения

Базовое использование

bash
ng build
# или сокращённо
ng b

Результат сборки

      • index.html
      • main.js
      • polyfills.js
      • runtime.js
      • styles.css

    • Development vs Production сборка

    bash
    ng build
# или явно
ng build --configuration development
    • Без минификации
    • Source maps включены
    • Быстрее собирается
    • Больший размер бандла
    ⚠️

    Начиная с Angular 12, ng build по умолчанию использует production-конфигурацию. Для dev-сборки явно укажите --configuration development.

    Полезные флаги ng build

    bash
    # Указать output-директорию
ng build --output-path ./my-dist
 
# Очистить output перед сборкой
ng build --delete-output-path
 
# Указать base href (для деплоя в подпапку)
ng build --base-href /my-app/
 
# Отключить source maps
ng build --source-map=false
 
# Анализ размера бандла
ng build --stats-json

    Конфигурации (environments)

    Angular поддерживает разные конфигурации для разных окружений.

    Структура файлов

      • environment.ts
      • environment.prod.ts
    • typescript
    // environment.ts (development)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};
 
// environment.prod.ts (production)
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com'
};

    Использование в коде

    typescript
    import { environment } from '../environments/environment';
 
@Injectable({ providedIn: 'root' })
export class ApiService {
  private apiUrl = environment.apiUrl;
 
  getUsers() {
    return this.http.get(`${this.apiUrl}/users`);
  }
}

    При сборке с --configuration production файл environment.ts автоматически заменяется на environment.prod.ts.

    Сравнение ng serve и ng build

    Аспектng serveng build
    НазначениеРазработкаДеплой
    КомпиляцияJIT (по умолчанию)AOT (в production)
    РезультатСервер в памятиФайлы на диске
    Hot reloadДаНет
    ОптимизацияМинимальнаяМаксимальная
    Source mapsДаОпционально

    Пограничные кейсы

    ⚠️

    Никогда не используйте ng serve для production! Webpack-dev-server не предназначен для продакшн-нагрузок.

    Ошибка порта

    bash
    # Если порт 4200 занят
Error: listen EADDRINUSE: address already in use :::4200
 
# Решение: использовать другой порт
ng serve --port 4201

    Ошибки сборки

    bash
    # Подробный вывод ошибок
ng build --verbose
 
# Показать предупреждения
ng build --stats-json

    Вопросы интервьюера

    Q: Чем отличается ng serve от ng build?

    ng serve запускает dev-сервер с hot reload для разработки, бандл хранится в памяти. ng build создаёт файлы на диске для деплоя на production-сервер.

    Q: Что такое AOT и JIT компиляция?

    JIT (Just-in-Time) — компиляция шаблонов в браузере во время выполнения. AOT (Ahead-of-Time) — компиляция на этапе сборки, быстрее загрузка, меньше ошибок в runtime.

    Q: Как развернуть Angular-приложение?

    Выполнить ng build --configuration production, затем скопировать содержимое папки dist/ на веб-сервер (nginx, Apache, или статический хостинг).

    Q: Что делает флаг --base-href?

    Устанавливает базовый путь для приложения. Необходим при деплое в подпапку: ng build --base-href /my-app/.

    Источники