Перейти к содержанию

Сборка

В данной главе рассмотрим, как развернуть Angular приложение на удаленном web-сервере.

Самый простой и быстрый способ:

1. Собрать исходные файлы:

1
ng build

2. Скопировать сгенерированные файлы из директории dist в корневую папку web-сервера.

У описанного способа есть один большой недостаток — сборка совсем не оптимизирована для запуска в режиме эксплуатации. Для оптимизации сборки Angular необходимо указать флаг --prod:

1
ng build --prod

Оптимизированная сборка включает в себя:

  • компиляцию в режиме AOT;
  • активацию режима prod (в момент запуска приложения по умолчанию вызывается метод enableProdMode());
  • объединение всех файлов в несколько больших (bundles);
  • минификацию и замену названий свойств и методов на более короткие;
  • удаление неиспользуемого кода.

В режиме prod приложение работает гораздо быстрее за счет отключения специфических для режима разработки проверок, например, за счет отключения двойного запуска механизма ChangeDetection.

Для настройки параметров, зависящих от режима запуска приложения (dev, test или prod), например, URL-адреса сервера, с которого запрашиваются данные, манипулируйте файлами в директории environments.

Для уменьшения размера bundle-файлов можно использовать флаг --build-optimizer:

1
ng build --prod --build-optimizer

Теперь рассмотрим флаги --base-href и --deploy-url, которые часто применяются при организации работы приложения через проксирующий сервис.

--base-href

Параметр --base-href используется для задания начального пути по умолчанию для относительных ссылок, указывающих путь к статическим файлам: картинкам, файлам стилей, скриптам и др.

1
ng build --prod --build-optimizer --base-href /test/

Например, если в HTML-файле путь к иконке указан как assets/images/icon.png, а сама директория assets находится в директории test, то сборка приложения Angular указанной командой сгенерирует правильный путь к иконке: /test/assets/images/icon.png.

Указание параметра --base-href также влияет на маршрутизацию приложения. Значение параметра всегда будет включаться в состав маршрута.

--deploy-url

Параметр --deploy-url задает начало пути по умолчанию только для статических файлов, запрашиваемых из файла index.html.

1
ng build --prod --build-optimizer --deploy-url /test/

В результате получается:

1
2
3
4
<link
    rel="stylesheet"
    href="/test/styles.ddf543754291862b7f90.css"
/>

В отличие от --base-href, параметр --deploy-url не влияет на маршрутизацию Angular.

Ссылки

Комментарии