Angular 6, после ng build index.html получает ошибки в консоли

Question

Я столкнулся с проблемой, пожалуйста, помогите мне решить эту проблему. Проблема в том, что когда я делаю ng build в моем CLI и перейдите в папку dist и запустите файл index.html, чтобы консоль получала ошибки пути к файлам.

Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/D:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

Answer 1

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

ng build --prod --base-href ./

Теперь он генерирует строки, похожие на следующие в вашем index.html -

<base href="./">
<!-- Note the file names here -->
<script type="text/javascript" src="runtime.30458714a8af1a2e7153.js"></script>
<script type="text/javascript" src="polyfills.db85ebdc34f3cf0f4d3f.js"></script>
<script type="text/javascript" src="scripts.e8fe6486441dc07e00c6.js"></script>
<script type="text/javascript" src="main.f9ea86a83ded92312d0f.js"></script>

Это оно! Он работает везде, вам просто нужно развернуть производственную сборку, и вы готовы к работе!

Также обратите внимание, что если вы пытаетесь запустить index.html прямо из ваших файлов, он не будет работать. Вам нужно будет разместить его на http-сервере (например, XAMPP для локального)

Answer 2

По умолчанию base для href свойство определяется как / для угловых проектов. Если вы создаете проект и обращаетесь к нему, открывая файл index.html, все .js что HTML хочет загрузить будет загружен из '/' directory,

Например, если вы используете Windows, и ваша сборка присутствует в C:\users\xys\ng\dist\index.html, и у тебя есть <script type="text/javascript" src="runtime.js"></script> в вашем HTML, браузер будет искать .js файлы в C:\runtime.js,

Чтобы решить эту проблему, вы можете скопировать все свои файлы в корневой каталог диска (не рекомендуется) или создать локальный сервер, а затем сервировать статические файлы на этом сервере (предпочтительный метод).