Angular cli: подготовка к работе

Вы не должны, и я думаю, что не можете использовать ng serve для публикации своей сборки. Файлы, созданные с помощью ng build, можно загрузить на веб-сервер и обслуживать оттуда.

1. Беги ng build -e=prod --prod --no-sourcemap --aot

Хотя в последней версии angular-cli по умолчанию исходные карты отсутствуют, это стоит отметить. -e=prod позаботится о том, чтобы использовалась производственная среда, определенная в папке environments. Последнее - это --aot. Если в вашем проекте не происходит ничего особенного, есть большая вероятность, что вы можете предварительно скомпилировать его с помощью компилятора с опережением времени. Однако вы можете столкнуться с проблемами, и вы можете устранить их с помощью ng serve --aot или полностью удалить --aot.

2. Затем вы можете продолжить копирование содержимого папки dist на свой веб-сервер. Однако стоит отметить, что вы должны убедиться, что все несуществующие файловые запросы на сервере будут перенаправляться на index.html, а URL-адрес, указывающий на ваше приложение, находится в корне.

Это означает, что для перенаправления index.html, например, на nginx, вы можете поместить это в блок конфигурации вашего сервера:

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

Это если www.example.com обслуживает index.html, созданный в папке dist. Если по какой-то причине вы хотите обслуживать свое приложение из подпапки, например, www.example.com/subfolder, вам следует изменить тег <base> внутри сгенерированного index.html, чтобы он указывал на эту подпапку.

Если вы хотите протестировать производственную сборку локально, одним из вариантов является установка lite-server.

npm install -g lite-server

Затем перейдите в консоли к path/to/project/root/dist и запустите lite-server. Это создаст веб-сервер, откроет ваш браузер и будет обслуживать сгенерированные index.html

Если вы используете nginx и хотите быть крутым и обслуживать сгенерированные файлы .gz статически, вы можете поместить это в свою конфигурацию nginx gzip:

gzip on;
gzip_static on;

nb build --prod поместите все необходимые файлы в папку dist.

Вам не нужно ng serve для запуска построенного проекта.

Вам нужно будет поместить dist контент на любой сервер (даже на какой-нибудь локальный хост)

ng serve предназначен только для разработки с перезагрузкой в ​​реальном времени.

У вас есть два варианта: вы можете скопировать свое приложение и запустить ng serve --prod (что, я думаю, немного избыточно), или вы можете скопировать свое ./dist на другой сервер и использовать какое-либо серверное программное обеспечение (например, nginx, apache, express - их много , вы можете выбрать тот, с которым вы знакомы). Все, что вам нужно, это передать все запросы, которые не запрашивает файл, в index.html, поскольку угловое приложение является SPA. Вот пример .htaccess для сервера Apache:

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html