Установка и настройка

f

История и контекст: почему установка Angular стала сложнее, но надёжнее

Angular начинался как монолитная среда с жёсткими требованиями к TypeScript и RxJS. Версия 2.0 (2016) требовала ручной настройки SystemJS и множества полифиллов. К 2026 году экосистема радикально изменилась: Angular CLI взял на себя 90% конфигурации, но появились новые точки настройки — строгий режим зон, Ivy-рендерер (по умолчанию с v9+), гибридный рендеринг и standalone-компоненты. Установка теперь — это не просто npm install, а работа с .angular.json, сборщиком Vite (вместо Webpack с v18) и разграничением окружений через Angular Firebase. Если в 2019 году типовой проект весил 300 КБ, то сегодня минимальная сборка — 12 КБ, но только при правильной конфигурации анимаций и ленивой загрузки модулей.

Подготовка среды: что должно быть на компьютере

Перед установкой Angular CLI проверьте три компонента: Node.js (версия 18.19 LTS или новее, строго — проверьте node -v), npm (не ниже 10.6.0) и Git (для шаблонов scaffolding). Без Git CLI не сможет создать проект с выбранной веткой starter-kit. Также рекомендуется установить Angular DevTools — расширение браузера для отладки производительности. В 2026 году без него невозможно увидеть tree-shaking-результаты и detect changes cycles.

Шаг 1: Глобальная установка Angular CLI через npx (без global install)

С 2025 года официальная документация рекомендует избегать глобальной установки @angular/cli. Вместо этого используйте npx @angular/cli@17 (версия 17 — последняя LTS на начало 2026). Это гарантирует стабильную работу с коллекцией schematics и исключает конфликты между проектами. Если вы всё же хотите глобальную установку — выполните npm install -g @angular/cli, но тогда каждый проект может затянуть свою версию. Вариант с npx даёт фиксацию версии через файл package.json.

Шаг 2: Создание проекта с параметрами — отключаем лишнее

Выполните npx @angular/cli@17 new angular-app --strict --standalone --routing --skip-tests --style=scss. Параметр --strict включает максимальную строгость TypeScript (запрещает any, требует явных типов), --standalone генерирует standalone-компоненты без NgModule, --skip-tests убирает файлы .spec.ts (добавите их позже через генератор). Флаг --style=scss задаёт препроцессор. Если не указать --routing, придётся вручную добавлять RouterModule в bootstrap.

Шаг 3: Тонкая настройка angular.json — production-сборка и подсчёт бюджета

Сразу после создания проекта откройте angular.json и найдите секцию configurations.production. Измените budgets: установите warning на 300 КБ, error на 400 КБ. Добавьте параметр outputHashing: all, чтобы избежать кеширования CSS в браузере. Включите optimization: true (сжимает JavaScript, но сохраняет sourcemaps) и aot: true (AOT-компиляция обязательна). Включите namedChunks: false, чтобы уменьшить размер логов в инструментах разработчика.

Шаг 4: Настройка переменных окружения — dev, staging, production

Создайте файлы src/environments/environment.dev.ts и src/environments/environment.prod.ts. В dev-файле пропишите apiUrl: 'http://localhost:3000/api', debug: true. В prod-файле — apiUrl: 'https://api.mysite.com', debug: false. Обновите angular.json в разделе configurations: для каждого окружения укажите fileReplacements — путь от src/…/environment.ts к нужному варианту. Без этого Angular будет брать только один файл и вы не сможете переключать среду при сборке.

Шаг 5: Подключение сторонних библиотек — стили и скрипты в angular.json

Если вы используете Tailwind CSS, установите npm install -D tailwindcss postcss autoprefixer, затем добавьте @tailwind base; @tailwind components; @tailwind utilities в глобальный SCSS-файл (src/styles.scss). Для иконок (Font Awesome) пропишите в angular.json → styles: "node_modules/@fortawesome/fontawesome-free/css/all.min.css". Глобальные скрипты (например, Google Analytics) добавляйте через scripts, указывая относительный путь от node_modules. Проверяйте порядок: сначала CSS, потом JS — иначе циклические зависимости в браузере.

Шаг 6: Настройка прокси для разработки — обход CORS

Создайте в корне проекта файл proxy.conf.json с содержимым: { "/api": { "target": "https://backend.example.com", "secure": false, "changeOrigin": true, "logLevel": "debug" } }. Затем добавьте в angular.json → serve → options строку "proxyConfig": "proxy.conf.json". В 2026 году больше половины ошибок при разработке — из-за CORS, настройка прокси решает их без изменений backend-заголовков. При деплое убирайте прокси — он работает только на dev-сервере.

Шаг 7: Оптимизация дерева зависимостей — удаление неиспользуемых пакетов

После установки всех пакетов выполните npx ng analytics off (отключает счётчики Google Analytics в CLI). Затем запустите npm ls --depth=0 — посмотрите на список top-level зависимостей. Удалите всё, чего нет в вашем коде (например, @angular/forms, если не используете реактивные формы через ReactiveFormsModule). Для production-сборки используйте ng build --configuration production --stats-json и затем проанализируйте bundle через npx source-map-explorer dist/*.js. Типовой размер Angular-приложения 2026 года — 45–60 КБ. Если бандл больше 100 КБ — ищите duplicates в модулях.

Практические советы по отладке и ошибкам установки

Что дальше: типичные сценарии первого запуска

После настройки выполните npm start (или ng serve). Откройте http://localhost:4200. Если видите логотип Angular — всё работает. Добавьте в app.component.ts вывод версии: console.log(this.version.full), где version = VERSION из @angular/core. Убедитесь, что DevTools показывают схему компонентов без AngularJS. Ваш проект готов к интеграции с NgRx, Angular Material или Firebase. В 2026 году ключевой тренд — микросборка (Micro Frontends) через Module Federation, для чего в angular.json нужно дополнительно настроить customWebpackConfig и plugin @angular-architects/module-federation.

Добавлено: 23.04.2026