Сборка, деплой и итоги курса

Деплой Angular — это собрать оптимизированную статику одной командой и отдать её любому хостингу, который умеет раздавать файлы.

«Код, который работает только у вас на ноутбуке, не существует для пользователя. Деплой — это момент, когда приложение становится настоящим».

Мы прошли путь от первого компонента до приложения с сервисами, сигналами, роутингом, формами и HTTP. Осталось выпустить его в мир. Production-сборка делается одной командой:

ng build               # сборка в папку dist/
ng build --configuration production  # явно прод-режим

Команда создаёт оптимизированную статику в папке dist/: код минифицирован, неиспользуемое вырезано (tree-shaking), бандлы разбиты на чанки, шаблоны скомпилированы заранее (AOT). Это набор обычных файлов — index.html, JS и CSS, — которые можно положить на любой статический хостинг.

# примеры деплоя статики из dist/
npx firebase deploy          # Firebase Hosting
npx vercel --prod            # Vercel
# или просто скопировать dist/ на Nginx-сервер

Важная тонкость SPA: при переходе на /cart и нажатии F5 сервер должен вернуть index.html, а не искать файл cart. Это называется SPA-фолбэк — все неизвестные пути перенаправляются на главный файл, после чего роутер Angular разберётся сам.

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

При ng build запускается тот же конвейер, что и в dev, но с агрессивными оптимизациями: AOT-компиляция шаблонов, минификация, удаление мёртвого кода, хеширование имён файлов для кеширования. Результат — статика без сервера приложения. Сервер нужен лишь чтобы раздавать файлы и настроить фолбэк на index.html.

   ng build
        |
   [ AOT компиляция шаблонов ]
   [ tree-shaking + минификация ]
   [ хеширование + чанки ]
        |
        v
   dist/  (index.html + *.js + *.css)
        |
   статический хостинг + SPA-фолбэк -> пользователь

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

• Забыть SPA-фолбэк. Без него обновление страницы на вложенном маршруте даст 404.
• Деплоить dev-сборку. ng serve — для разработки; в прод идёт результат ng build.
• Захардкодить URL API. Используйте конфиг окружений вместо строк в коде.

Best practices

• Деплойте только содержимое dist/ после ng build.
• Настройте фолбэк всех путей на index.html на стороне хостинга.
• Выносите адреса API и ключи в файлы окружений, а не в исходники.

Итоги курса. Вы освоили современный Angular 19: standalone-компоненты, привязки и control flow @if/@for, сервисы и внедрение зависимостей, сигналы (signal/computed/effect) и сигнальный стор, роутер с ленивой загрузкой, реактивные формы, HttpClient с RxJS и оптимизацию change detection вплоть до zoneless. Дальше — углубляйтесь в SSR (Angular Universal), тестирование, библиотеки UI и архитектуру крупных приложений. Соберите свой проект — лучший учитель это практика. Успехов!

Закрепляем

Деплой Angular проще, чем кажется: команда ng build прогоняет production-конвейер (AOT-компиляция шаблонов, tree-shaking, минификация, хеширование имён) и кладёт готовую статику в папку dist/. Это набор обычных файлов — index.html, JS и CSS, — которым не нужен сервер приложения. Любой статический хостинг, от Nginx до Firebase, Vercel и облачных бакетов, способен раздать их пользователю.

Единственная тонкость, о которую спотыкаются почти все, — SPA-фолбэк. Когда пользователь открывает вложенный маршрут вроде /cart и жмёт F5, сервер пытается найти файл cart, которого физически нет, и возвращает 404. Решение — настроить хостинг так, чтобы все неизвестные пути отдавали index.html; дальше роутер Angular на клиенте сам разберёт URL и покажет нужную страницу. И последнее правило гигиены: выносите адреса API и ключи в файлы окружений, а не хардкодьте их в исходниках, чтобы одну и ту же сборку можно было настроить под разные среды.