@Drovosek01

Почему не работают относительные пути в html файле?

Сделал небольшое веб-приложение на Angular 6. Т.к. после компиляции это набор html, css, js и ассетов, решил попробовать выложить на github pages.

В VSCode терминале выполнил команду ng build и в корне проекта появилась папка dist со скомпилированными файлами:
5ce6f381a5c95437954071.png

Открываю index.html и отображается чистая белая страница (хотя при выполнении команды ng serve отображался сделанный контент). Залез в Dev Tools, а там отображаются ошибки о том, что не найдены js файлы (хотя они лежат в той же папке с html файлом).
5ce6f44a73409136263938.png

Пробовал в html файле в тег script в атрибут src перед названиями файлов добавлять "/", потом "./", чтобы получалось так
<script type="text/javascript" src="/runtime.js">
<script type="text/javascript" src="./runtime.js">

Но это не дало никаких положительных результатов.
Браузер пытается подгрузить .js файлы с корня диска.

Почему так происходит и как это исправить?

UPDATE:

Покопался в html файле, закомментировал тег <base href="/"/>
После этого все файлы подгрузились без ошибок, но для работы приложения этот тег необходим, отображается все тот же чистый лист и в Dev Tools вылазит ошибка
Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

5ce6fa8f65af0572228973.png
  • Вопрос задан
  • 1209 просмотров
Пригласить эксперта
Ответы на вопрос 2
<base href="https://[username].github.io/[repo]/">

Это можно изменять при сборке, указав в специальном флаге:
ng build --prod --base-href https://[username].github.io/[repo]/
Ответ написан
joeberetta
@joeberetta
Читай: https://epdf.pub/google-for-dummies.html
С такой же проблемой столкнулся пару дней назад, и решением оказалось такое решение:
type="text/javascript" src="runtime.js">
Как я пришел к этому:
Попробуйте по разному прописывать пути и в девтулзе наводите на саму ошибку с
Failed to load resource
Он будет показывать полный путь по которому ищет файл, собственно от этого и плясите.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы