Производственная сборка Angular 7 не загружает стили и js

Question

У меня небольшой проект, написанный на Angular 7, и я пытаюсь создать из него рабочую версию.

Когда я бегу

ng build --prod --aot --service-worker

Сборка будет работать без ошибок, как показано на скриншоте.

С другой стороны, когда я пытаюсь загрузить приложение в браузере, оно выдает ошибки в консоли и не загружается вообще.

Есть идеи, что вызывает это? Файлы находятся в том же каталоге, что и index.html, и они существуют.

Answer 1

после компиляции вашего проекта для production --prod выходных файлов после компиляции вы не можете просто открыть его из браузера, вам нужно использовать local server на вашем компьютере, чтобы вы могли использовать XAMPP

Answer 2

Итак, я понял, что если я хочу обслуживать эти файлы статически, не используя какой-либо сервер перед страницей, я должен установить параметр сборки --base-href ./, а также использовать относительные пути для ресурсов, таких как изображения.

Таким образом, команда построения на самом деле будет

ng build --prod --aot --service-worker --base-href ./

Answer 3

Используйте http-сервер для локального запуска встроенного кода

npm install http-server
http-server --help
http-server -p 8080 -c-1 dist/<project-name>

-p указывает порт, -c-1 отключает кэширование, а последний параметр - это каталог, который должен обслуживаться.

Если вы играете с работниками сферы обслуживания и хотите проверить их, это хороший источник информации .