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

У меня проблема, пожалуйста, помогите мне ее решить. Проблема в том, что когда я делаю ng build в своем интерфейсе командной строки, перехожу в папку 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

angular angular-cli angular-builder console.log ng-build
person ZaIn KhAn    schedule 31.12.2018    source источник
comment
@ZalnKhAn, где вам нужно запустить свой проект локально или на сервере.? вы можете добавить базовый URL проекта i.e:- <base href="/vbhfd/">.   -  person Abhishek    schedule 31.12.2018
comment
Файлы должны находиться в корне документа веб-сервера, в противном случае вы должны указать путь в базовом теге.   -  person Osakr    schedule 31.12.2018
comment
Можете ли вы показать мне демонстрацию того, что я должен заменить или поставить?   -  person ZaIn KhAn    schedule 31.12.2018

Ответы (2)


arrow_upward
18
arrow_downward

Это связано только с путем, просто используйте флаг --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 для локального)

person Tushar Walzade    schedule 31.12.2018
comment
эта проблема возникает после этого main.786282d324cee4d6299d.js: 1 ERROR Ошибка: Uncaught (в обещании): SecurityError: Не удалось выполнить replaceState в «History»: объект состояния истории с файлом URL: /// D: / angular / erp-core / dist / erp-core / 'не может быть создан в документе с источником' null 'и URL' file: /// D: /angular/erp-core/dist/erp-core/index.html ' . Ошибка: не удалось выполнить replaceState в истории: объект состояния истории с URL-адресом 'file: /// D: / angular / erp-core / dist / erp-core /' не может быть создан в документе с источником - person ZaIn KhAn; 31.12.2018
comment
Я удалил из него некоторые базовые теги из-за силы поля комментариев ‹head› ‹meta charset = utf-8› ‹base href = /› ‹link rel = icon type = image / x-icon href = favicon.ico› ‹/ head ›‹Body› ‹app-master-page› ‹/app-master-page›‹ тип скрипта = текст / javascript src = runtime.js ›‹/script›‹ тип скрипта = текст / javascript src = polyfills.js ›‹ / script ›‹ тип сценария = текст / javascript src = styles.js ›‹/script›‹ тип сценария = текст / javascript src = scripts.js ›‹/script›‹ тип сценария = текст / javascript src = vendor.js › ‹/Script› ‹тип скрипта = текст / javascript src = main.js› ‹/script› - person ZaIn KhAn; 31.12.2018
comment
сравните его с моим обновленным ответом и убедитесь, что у вас есть производственные скрипты с тем же именем, которое вы указали здесь. - person Tushar Walzade; 31.12.2018
comment
Просто запустите команду, как указано выше, и ничего не меняйте в index.html, вот и все. - person Tushar Walzade; 31.12.2018
comment
для ошибки replaceState настройте маршрутизатор для использования useHash следующим образом - RouterModule.forRoot(routes, { useHash: true }) - person Tushar Walzade; 31.12.2018
comment
replaceState все еще существует после добавления useHash - person ZaIn KhAn; 31.12.2018
comment
Ошибка replaceState все еще существует после добавления useHash - person ZaIn KhAn; 31.12.2018
comment
обратитесь к этому - stackoverflow.com/questions/49365057/ - person Tushar Walzade; 31.12.2018
comment
как насчет пути к изображениям? - person ZaIn KhAn; 31.12.2018
comment
обратитесь к этому для относительных путей - w3schools.com/html/html_filepaths.asp - person Tushar Walzade; 31.12.2018
comment
Путь изображений идеален, но он идет по пути моего диска - person ZaIn KhAn; 01.01.2019

arrow_upward
1
arrow_downward

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

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

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

person Sachin Gupta    schedule 31.12.2018
comment
Для всех файлов, упомянутых в вашем HTML (пример runtime.js в приведенном выше случае), если источник не является абсолютным путем, браузер сделает запрос, используя value of base href='thisValue'. при открытии файла HTML / относится к корневому каталогу (в случае ОС * nix) и корню раздела. в случае ОС Windows. Таким образом, делается запрос, скажем, к C:\runtime.js, который не выполняется, потому что файл не существует. - person Sachin Gupta; 31.12.2018