Angular 8 запустить папку dist на npm запустить start-dev

Question

Я пытаюсь запустить папку dist напрямую вместо того, чтобы делать ng serve. Для этого я написал сценарий в package.json.

start-dev: ng build && http-server dist

Проблема в том, что я хочу, чтобы он запускался автоматически при сохранении любого файла. Кроме того, он снова построит весь npm, что является очень медленной процедурой. Любой другой способ, как я могу это сделать? И сделать это быстрее?

Answer 1

Как указано в ответе Криса, вы можете автоматически перестроить свое приложение при использовании ng build --watch.

Если вы просто хотите использовать последнюю версию своего приложения, вы можете отключить кеширование из http-server ( который включен по умолчанию), используя опцию -c-1 ( do c)

On linux (используйте одиночный & для параллельного запуска скриптов)

"start-dev": "ng build --watch & http-server -c-1 dist", 

На windows (обратите внимание на команду start):

"start-dev": "start ng build --watch && start http-server -c-1 dist", 

Примечания

• Возможно, ваш браузер уже кэшировали файлы dist, прежде чем деактивировать кеш, как указано выше, поэтому очистите кеш вручную один раз. Вам это не понадобится после

• Это решение не будет перезагружать страницу, вам придется делать это самостоятельно

• http-server не поддерживает откаты, что может быть проблемой, если вы используете стратегию по умолчанию angular. Таким образом, если вы были на http://localhost:8080/module1/path1 и перезагружали страницу, вы получите 404. Вам нужно перезагрузить http://localhost:8080 и перейти к правильному URL-адресу из маршрутизатора приложения

• В зависимости от вашего angular.json, папка вывода может быть dist, dist/projectName или dist/projectName/browser, или как вы указали

Answer 2

Вы можете использовать флаг --watch при запуске ng build. Таким образом, команда будет иметь вид ng build --watch для автоматического восстановления при изменении файла.

Для автоматического перезапуска команды http-server dist/<app_name> вы можете использовать nodemon

С nodemon команда будет выглядеть так: nodemon --watch dist --exec 'http-server dist/<app_name>'

Вы можете запускать обе команды вместе следующим образом: ng build --watch & nodemon --watch dist --exec 'http-server dist/<app_name>'

Приведенные выше команды будут работать вместе. Angular восстановит папку dist, а nodemon перезапустит ваш сервер при изменении папки dist.

Answer 3

Лучше установить lite-сервер. Для установки lite-сервера: -

npm install --global lite-server

затем откройте папку dist в cmd или терминале

lite-server

Ресурс: - https://www.npmjs.com/package/lite-server