Установка окружения и Angular CLI

Angular CLI — это командная утилита, которая создаёт проект, генерирует файлы, запускает сервер и собирает прод-сборку одной командой.

«Хороший инструмент не делает работу за вас, но убирает всё скучное, чтобы вы думали только о коде».

Прежде чем писать первый компонент, нужно собрать рабочее место. Angular требует Node.js — среду выполнения JavaScript вне браузера, и npm — менеджер пакетов, который ставит зависимости. Для Angular 19 нужна актуальная LTS-версия Node (20 или 22). Проверить установку можно так:

node --version   # ожидаем v20.x или выше
npm --version    # менеджер пакетов

Дальше ставим глобально Angular CLI — главный инструмент разработчика. Через него вы будете делать практически всё, что не связано напрямую с написанием логики.

npm install -g @angular/cli
ng version       # проверяем, что CLI встал

Создание проекта — одна команда. CLI задаст пару вопросов (нужен ли роутинг, какой формат стилей) и сгенерирует готовую структуру с настроенной сборкой, линтером и тестами.

ng new shop-app
cd shop-app
ng serve --open  # запуск dev-сервера на http://localhost:4200

Команда ng serve поднимает локальный сервер с горячей перезагрузкой: вы меняете файл — браузер обновляется сам. Это и есть ваш ежедневный режим работы.

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

CLI — это обёртка над сборщиком (с Angular 17 — esbuild через Vite в dev-режиме). Когда вы запускаете ng serve, происходит конвейер: TypeScript компилируется в JavaScript, шаблоны Angular превращаются в инструкции рендеринга, всё это бандлится и отдаётся браузеру. Понимание конвейера помогает читать ошибки.

  ваш .ts код
      |
   [ TypeScript-компилятор ]  ->  проверка типов
      |
   [ Angular-компилятор (AOT) ]  ->  шаблоны -> JS
      |
   [ esbuild/Vite бандлер ]  ->  bundle.js
      |
      v
   браузер (localhost:4200)

Частые ошибки

• Старая версия Node. Angular жёстко требует свежий Node; на устаревшем ng new упадёт с непонятной ошибкой.
• Установка CLI без флага -g. Тогда команда ng не появится в системе глобально.
• Путаница версий CLI и проекта. Если глобальный CLI новее проекта, используйте npx ng внутри папки — он возьмёт локальную версию.

Best practices

• Используйте менеджер версий Node (nvm), чтобы держать несколько версий и переключаться между проектами.
• Не редактируйте сгенерированные конфиги без нужды — CLI рассчитан на конвенцию «по умолчанию».
• Генерируйте компоненты и сервисы через ng generate, а не вручную: так файлы и импорты создаются согласованно.

Итоги. Node и npm дают среду, Angular CLI — рабочие команды. ng new создаёт проект, ng serve запускает разработку с горячей перезагрузкой. В следующем уроке разберём, из чего состоит сгенерированный проект.

Закрепляем

Окружение Angular держится на трёх китах, и важно понимать роль каждого. Node.js — это движок, который умеет исполнять JavaScript вне браузера; именно на нём работают и сборщик, и dev-сервер. npm — менеджер пакетов: он скачивает сотни библиотек-зависимостей в папку node_modules по описанию из package.json. Angular CLI — командный центр поверх всего этого, который превращает многошаговые операции в одну короткую команду.

Запомните ежедневный набор команд — вы будете печатать их сотни раз. ng serve запускает разработку с автообновлением. ng generate (коротко ng g) создаёт компоненты, сервисы и прочие сущности по шаблону. ng build собирает прод-версию. ng test прогоняет тесты. ng update помогает безопасно поднимать версии. Привыкайте делать рутину через CLI, а не вручную: так структура проекта остаётся единообразной, а импорты и регистрация — корректными.