2. Установка и Angular CLI

🛠️ Установка Angular и работа с CLI

Angular CLI (Command Line Interface) — это твой лучший друг в работе с Angular. Он создаёт проекты, генерирует компоненты, запускает сервер разработки, собирает приложение — и всё это одной командой. Представь его как швейцарский нож для Angular разработчика! 🔪

📦 Требования: Node.js

Первым делом нужен Node.js. Angular 17+ требует Node.js 18.x или новее.

node --version
# Должно быть: v18.x.x или выше (например v20.11.0)

# Проверяем npm
npm --version
# Должно быть: 9.x или выше

Если Node.js не установлен или версия старая:

# Рекомендуемый способ: nvm (Node Version Manager)
# macOS/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 20
nvm use 20

# Windows: скачай nvm-windows с GitHub
# или просто установи LTS версию с nodejs.org

Angular версия	Node.js	npm
Angular 17	18.13+ или 20.9+	9+
Angular 16	16.14+	8+
Angular 15	14.20+	6.14+

🌍 Установка Angular CLI

# Глобальная установка Angular CLI
npm install -g @angular/cli

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

После установки ng version выводит что-то такое:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 17.3.0
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin x64

Angular:
...

🚀 Создание нового проекта: `ng new`

ng new my-awesome-app

CLI задаст несколько вопросов:

? Would you like to add Angular routing? (y/N)  →  y
? Which stylesheet format would you like to use?
  ❯ CSS
    SCSS   [ https://sass-lang.com/documentation/syntax#scss ]
    Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
    Less   [ http://lesscss.org ]

Ответы влияют на проект:

Routing: добавит app-routing.module.ts с RouterModule
SCSS: все компоненты будут генерироваться с .scss файлами

Можно передать все опции сразу, без интерактивного режима:

# Полный контроль без вопросов
ng new my-app \
  --routing=true \
  --style=scss \
  --strict=true \
  --standalone=false

Флаг	Значения	Описание
`--routing`	`true/false`	Добавить RouterModule
`--style`	`css/scss/sass/less`	Формат стилей
`--strict`	`true/false`	Строгий режим TypeScript
`--standalone`	`true/false`	Standalone компоненты (Angular 17 default: true)
`--skip-tests`	флаг	Не создавать .spec.ts файлы
`--prefix`	строка	Префикс компонентов (по умолчанию `app`)

📁 Структура созданного проекта

После ng new получаем такую структуру:

my-awesome-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      ← Корневой компонент
│   │   ├── app.component.html    ← Шаблон
│   │   ├── app.component.scss    ← Стили
│   │   ├── app.component.spec.ts ← Тесты
│   │   ├── app.module.ts         ← Корневой модуль (если не standalone)
│   │   └── app-routing.module.ts ← Маршруты
│   ├── assets/                   ← Статические файлы (картинки, шрифты)
│   ├── environments/             ← Конфигурации окружений
│   │   ├── environment.ts        ← dev конфиг
│   │   └── environment.prod.ts   ← prod конфиг
│   ├── index.html                ← Главный HTML файл
│   ├── main.ts                   ← Точка входа
│   └── styles.scss               ← Глобальные стили
├── angular.json                  ← Конфигурация Angular CLI
├── tsconfig.json                 ← Конфигурация TypeScript
├── tsconfig.app.json             ← TypeScript для приложения
├── tsconfig.spec.json            ← TypeScript для тестов
├── package.json                  ← Зависимости
└── package-lock.json             ← Зафиксированные версии

Разберём ключевые файлы:

main.ts — точка входа, запускает Angular:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// Загружаем Angular приложение через AppModule
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

angular.json — конфигурация CLI:

{
  "projects": {
    "my-awesome-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-awesome-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
              ],
              "outputHashing": "all"
            }
          }
        }
      }
    }
  }
}

▶️ Запуск сервера разработки: `ng serve`

# Базовый запуск
ng serve

# Сервер запустится на http://localhost:4200
# Изменения файлов → автоматическая перекомпиляция!

Полезные флаги:

# Другой порт
ng serve --port 3000

# Открыть браузер автоматически
ng serve --open

# Слушать все сетевые интерфейсы (доступ с других устройств)
ng serve --host 0.0.0.0

# Всё вместе
ng serve --port 3000 --open --host 0.0.0.0

🏗️ Сборка проекта: `ng build`

# Development сборка (с source maps, без оптимизации)
ng build

# Production сборка (минификация, tree-shaking, оптимизация)
ng build --configuration=production

# Краткий вариант
ng build -c production

Что делает production сборка:

До:   main.js      →  2.4 MB  (с комментариями, именами переменных)
После: main.abc123.js →  210 KB  (минифицирован, tree-shaken, gzipped: ~65 KB)

# Результат сборки в папке dist/
dist/
└── my-awesome-app/
    ├── index.html
    ├── main.abc123.js      ← приложение
    ├── polyfills.def456.js ← полифилы
    ├── runtime.ghi789.js   ← webpack runtime
    └── styles.css

🧪 Запуск тестов: `ng test`

# Запуск unit тестов
ng test

# Запустить один раз (не watch mode) — для CI
ng test --watch=false

# С покрытием кода
ng test --coverage

Angular использует Karma + Jasmine по умолчанию. Можно переключиться на Jest:

# Установка Jest схемы
ng add @angular-builders/jest

✨ Генерация кода: `ng generate`

Это убийственная фича Angular CLI! Не пишешь boilerplate вручную — CLI генерирует всё:

# Компонент
ng generate component users/user-list
# или коротко:
ng g c users/user-list

# Создаёт:
# src/app/users/user-list/user-list.component.ts
# src/app/users/user-list/user-list.component.html
# src/app/users/user-list/user-list.component.scss
# src/app/users/user-list/user-list.component.spec.ts
# и добавляет компонент в ближайший module!

# Сервис
ng g service services/auth

# Модуль
ng g module features/users --routing

# Пайп (фильтр)
ng g pipe pipes/truncate

# Директива
ng g directive directives/highlight

# Guard (защита маршрута)
ng g guard guards/auth --implements CanActivate

# Резолвер
ng g resolver resolvers/user-data

# Интерцептор
ng g interceptor interceptors/auth

Полезные флаги для ng generate:

# Не создавать тестовый файл
ng g c header --skip-tests

# Standalone компонент (Angular 14+)
ng g c sidebar --standalone

# Без создания отдельной папки
ng g c home --flat

# Посмотреть что будет создано (dry run, без реальных изменений)
ng g c dashboard --dry-run

# Инлайн шаблон и стили (всё в одном .ts файле)
ng g c mini-widget --inline-template --inline-style

📚 Добавление библиотек: `ng add`

ng add — умная установка Angular-совместимых библиотек. В отличие от npm install, ng add также автоматически настраивает библиотеку в проекте:

# Angular Material — UI компоненты
ng add @angular/material
# Спрашивает тему, добавляет стили, импортирует BrowserAnimationsModule

# Angular Universal — SSR
ng add @nguniversal/express-engine

# PWA поддержка
ng add @angular/pwa

# Jest вместо Karma
ng add @angular-builders/jest

# Tailwind CSS
ng add ngx-tailwind

🔄 Обновление Angular: `ng update`

# Посмотреть доступные обновления
ng update

# Обновить Angular
ng update @angular/core @angular/cli

# Обновить на конкретную версию
ng update @angular/core@17 @angular/cli@17

Angular версии меняются каждые 6 месяцев. CLI умеет автоматически мигрировать код при обновлении!

🎯 Шпаргалка команд

# Создание
ng new <name>                    # Новый проект
ng g c <path/name>               # Компонент
ng g s <path/name>               # Сервис
ng g m <name> --routing          # Модуль с роутингом
ng g p <path/name>               # Пайп
ng g d <path/name>               # Директива
ng g guard <path/name>           # Guard
ng g interceptor <path/name>     # Интерцептор

# Разработка
ng serve                         # Dev сервер
ng serve --port 3000 --open      # Кастомный порт + открыть браузер

# Сборка
ng build                         # Dev сборка
ng build -c production           # Prod сборка

# Тесты
ng test                          # Unit тесты
ng e2e                           # E2E тесты

# Утилиты
ng lint                          # Линтер
ng add <package>                 # Добавить библиотеку с настройкой
ng update                        # Обновить Angular

Практика

Попробуйте концепцию в интерактивном редакторе:

2. Установка и Angular CLI

🛠️ Установка Angular и работа с CLI

📦 Требования: Node.js

🌍 Установка Angular CLI

🚀 Создание нового проекта: ng new

📁 Структура созданного проекта

▶️ Запуск сервера разработки: ng serve

🏗️ Сборка проекта: ng build

🧪 Запуск тестов: ng test

✨ Генерация кода: ng generate

📚 Добавление библиотек: ng add

🔄 Обновление Angular: ng update