Angular

Angular CLI и структура проекта

Новый разработчик приходит в команду и за полчаса должен поднять рабочее окружение. В мире без единого инструмента это означает выбор бандлера, настройку TypeScript, линтера, тест-раннера и склейку всего этого руками - день уходит впустую. В Angular одна команда ng new создаёт готовый проект: сборка, тесты, линтинг и dev-сервер уже настроены и совместимы. Команда тратит время на продукт, а не на конфиги.

  • Google: внутренние команды поднимают новые приложения одной командой CLI вместо ручной настройки тулинга
  • Стартапы: ng new даёт прод-готовую сборку за минуту, без дня на конфигурацию Webpack или Vite вручную
  • Корпоративные монорепы: единый CLI гарантирует одинаковую структуру десятков приложений в одной организации
  • Open-source библиотеки Angular: ng generate library создаёт пакеты по единому шаблону
  • CI-пайплайны: ng build и ng test - стандартные шаги сборки в GitLab CI и GitHub Actions без кастомных скриптов

Предварительные знания

  • Установленный Node.js LTS и npm
  • Базовое понимание командной строки: запуск команд, переход по каталогам
  • Урок ng-01: что такое Angular и почему он opinionated
  • Идея о том, что код перед запуском в браузере проходит сборку

ng new: проект за одну команду

Команда ng new создаёт новое приложение со всем необходимым тулингом. CLI задаёт пару вопросов (формат стилей, нужен ли SSR), скачивает зависимости и формирует готовую к запуску структуру. В современных версиях проект создаётся как standalone по умолчанию: никакого корневого NgModule, приложение стартует через bootstrapApplication. Сборка настроена на esbuild, а dev-сервер - на Vite.

Команда ng serve поднимает dev-сервер с горячей перезагрузкой: при сохранении файла страница обновляется за миллисекунды без полной пересборки. Под капотом esbuild компилирует TypeScript на порядок быстрее старого Webpack-стека, а Vite раздаёт модули в браузер. По умолчанию приложение доступно на localhost:4200.

До Angular 17 проекты создавались с NgModule, и standalone было опцией. Теперь всё наоборот: standalone - дефолт, а NgModule считается легаси и нужен лишь при поддержке старого кода. Если в туториале фигурирует app.module.ts, это устаревший материал.

КомандаЧто делает
ng serveDev-сервер с HMR на Vite, обычно localhost:4200
ng buildПрод-сборка с оптимизацией в каталог dist
ng testЗапуск юнит-тестов (Vitest в новых версиях)
ng generateГенерация компонентов, сервисов, директив и т.д.

Что создаёт ng new в современных версиях Angular по умолчанию?

Раскладка файлов проекта

Структура Angular-проекта предсказуема, что и ценится в больших командах. Исходный код живёт в src/. Точка входа - main.ts, где вызывается bootstrapApplication. Глобальные провайдеры (роутер, HTTP-клиент) собираются в app.config.ts. Сами компоненты лежат в src/app. Настройки сборки и список приложений хранятся в angular.json в корне.

В app.config.ts собираются провайдеры на уровне всего приложения через массив providers. Сюда подключаются роутер, HTTP-клиент и другие глобальные сервисы. Такой явный конфиг заменил старый AppModule и делает зависимости видимыми в одном месте.

Файлы вроде provideRouter и provideHttpClient называют функциями-провайдерами. Они подключают целые подсистемы фреймворка одной строкой в массиве providers. Это и есть batteries included в действии: роутер и HTTP не нужно искать в сторонних пакетах.

Где в современном Angular-проекте собираются глобальные провайдеры приложения, такие как роутер и HTTP-клиент?

ng generate и команды сборки

Команда ng generate (короткое имя ng g) создаёт элементы фреймворка по единому шаблону: компоненты, сервисы, директивы, пайпы, гварды. Это убирает рутину и гарантирует, что весь код в проекте устроен одинаково. Например, ng g component user-card создаёт компонент с TypeScript-файлом, шаблоном и стилями, уже связанными между собой.

Для выпуска приложения используется ng build. В прод-режиме CLI собирает оптимизированный бандл: tree-shaking убирает неиспользуемый код, минификация сжимает результат, а файлы получают хеши в именах для надёжного кэширования. Результат складывается в каталог dist и готов к раздаче со статического хостинга или CDN.

КомандаНазначениеКогда применять
ng serveЛокальная разработка с HMRКаждый день при написании кода
ng buildПрод-бандл в distПеред деплоем, в CI
ng generateСоздание артефактов по шаблонуКогда нужен новый компонент или сервис
ng testЮнит-тесты на VitestЛокально и в CI

Не стоит запускать ng serve для прод-раздачи: dev-сервер не оптимизирует код и не предназначен для нагрузки. Для продакшена нужен ng build и раздача готовых файлов из dist через веб-сервер или CDN.

В чём разница между ng serve и ng build?

Связь с другими темами

CLI создаёт скелет, который дальше наполняется кодом:

  • Компоненты — ng generate component создаёт компонент - следующий разбираемый строительный блок
  • Зачем Angular — CLI - практическое воплощение идеи batteries included из первого урока

Итог

  • Angular CLI - центральный инструмент: ng new, ng generate, ng serve, ng build и ng test покрывают весь цикл разработки
  • ng new создаёт standalone-проект по умолчанию, без NgModule, и сразу настраивает сборку, тесты и линтинг
  • Dev-сервер в современных версиях работает на esbuild и Vite, что даёт быстрый старт и мгновенный HMR
  • ng generate генерирует компоненты, сервисы, директивы и пайпы по единому шаблону, экономя рутину
  • Структура проекта предсказуема: src/app с компонентами, app.config.ts с провайдерами, angular.json с настройками сборки

Связанные уроки

  • ng-01-why-angular — CLI - это инструмент того самого opinionated-фреймворка, философию которого разбирал первый урок
  • ng-03-components — ng generate component создаёт компоненты, чей разбор начинается в следующем уроке
Angular CLI и структура проекта

0

1

Войти