Сборка и публикация

ng serve удобен для разработки, но на настоящий сервер выкладывают собранную версию: код сжат, лишнее удалено, файлы готовы к раздаче. После сборки приложение Angular — это просто набор статических файлов: HTML, JavaScript и CSS. Их может раздавать любой веб-сервер.

Сборка

ng build

По умолчанию сборка идёт в режиме production: код минифицирован, отладочные проверки отключены. В терминале появится таблица файлов с размерами — отдельно начальные (Initial) и ленивые (Lazy chunk files).

Результат лежит в папке dist:

dist/my-app/
└── browser/
    ├── index.html
    ├── main-ABCD1234.js
    ├── styles-EFGH5678.css
    └── favicon.ico

На сервер копируют содержимое папки dist/my-app/browser. Буквы в именах файлов — отпечаток содержимого: после новой сборки имена меняются, и браузер не возьмёт старую версию из кэша.

Проверка сборки локально

Сборку удобно открыть перед публикацией. Подойдёт любой статический сервер, например пакет serve:

npx serve dist/my-app/browser -s

Флаг -s включает режим одностраничного приложения. Откройте адрес из терминала (обычно http://localhost:3000) — приложение работает так же, как в ng serve.

Настройка сервера

Маршруты Angular существуют только в браузере. Если пользователь откроет /posts/1 напрямую или обновит страницу, сервер станет искать файл posts/1 и вернёт 404. Поэтому сервер настраивают так: если файла нет — отдать index.html. Для nginx это одна строка:

location / {
    try_files $uri $uri/ /index.html;
}

Netlify, Vercel, Firebase Hosting и похожие сервисы делают это одной настройкой «single-page app» или файлом с правилом перенаправления.

Приложение не в корне сайта

Если приложение будет жить по адресу вроде https://example.com/blog/, укажите базовый путь при сборке:

ng build --base-href /blog/

Значение попадёт в тег base в index.html, и браузер будет загружать файлы и строить адреса маршрутов от /blog/.

Настройки для разных окружений

Адрес API на сервере разработки и в продакшене часто разный. Команда создаёт файлы окружений:

ng generate environments

// src/environments/environment.ts
export const environment = {
  apiUrl: 'https://jsonplaceholder.typicode.com',
};

Рядом появится environment.development.ts: при ng serve используется он, а при ng build — основной файл. Импортируйте environment в сервисе и берите адрес из environment.apiUrl.

Частая ошибка

Открыть dist/my-app/browser/index.html двойным щелчком в проводнике. Страница будет пустой, а в консоли — ошибки загрузки скриптов: браузер открывает файл по адресу file://, где не работают модули и маршруты. Сборку всегда проверяйте через веб-сервер, как показано выше.