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

Question

[Drovosek01]

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

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


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


Пробовал в 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.

Comments

[lamer350]

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

[Drovosek01]

lamer350, я обновил вопрос. Если убрать тег <base href="/"/>, то все подгружается норм, но этот тег необходим для работы приложения и без него ничего не отображается ((

[Дмитрий Лузанов]

Оффтоп, для продакшена недостаточно просто ng build, нужно добавить флаг --prod, чтобы в итоге было ng build --prod.

[Ivan Stroykin]

А чем вам не нравится команда ng serve? Браузер не разрешит вам прямые запросы к файлам (правила безопасности). А причина "зачем вам это нужно" не ясна...

[Ivan Stroykin]

Дмитрий Лузанов, Надо было написать еще - для чего конкретно это нужно, на проде можно использовать и сборку после ng build, а вот почему именно ng build --prod неплохо было бы узнать автору вопроса, раз уж написали оффтоп :)

[Drovosek01]

Ivan Stroykin, я искал вариант скомпилировать проект в набор "обычных файлов сайта", чтобы потом закинуть скомпилированные файлы на флешку и просто открыть в браузере на другом компе, дабы на другом компе не разворачивать проект, который разворачивается в ~500 МБ и ~30 000 файлов.
На счет аргумента --prod, я так понимаю, задействуется минификация всех конечных файлов и, возможно, еще какие-то техники сжатия. Позже почитаю про этот аргумент.

[Ivan Stroykin]

Drovosek01, Это что за проект такой на 500 МБ?)
Закиньте на гитхаб и откройте на stackblitz используя следующую ссылку:

stackblitz.com/github/{ИМЯ_ПОЛЬЗОВАТЕЛЯ}/{РЕПОЗИТОРИЙ}

Вот вам и код и рабочий проект перед глазами

[Drovosek01]

Ivan Stroykin, цифры, которые я указывал выше, относятся к папке node_modules проекта. Сам ангуляр там весит ~270 МБ + дополнительные модули и того набегает ~500 МБ.

Answer 1

[Дмитрий Лузанов]

<base href="https://[username].github.io/[repo]/">

Это можно изменять при сборке, указав в специальном флаге:

ng build --prod --base-href https://[username].github.io/[repo]/

Comments

[Drovosek01]

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

[Drovosek01]

Проверил. Это же, опубликованное на Github Pages приложение нормально работает, только все картинки "посыпались", хотя папку с ассетами я тоже загрузил, но дело с картинками, я думаю - дело поправимое.

Answer 2

[Шохрух Шаймардонов]

С такой же проблемой столкнулся пару дней назад, и решением оказалось такое решение:
type="text/javascript" src="runtime.js">
Как я пришел к этому:
Попробуйте по разному прописывать пути и в девтулзе наводите на саму ошибку с
Failed to load resource
Он будет показывать полный путь по которому ищет файл, собственно от этого и плясите.

Comments

[Drovosek01]

Я обновил вопрос. Если убрать тег <base href="/"/>, то все подгружается норм, но этот тег необходим для работы приложения и без него ничего не отображается ((

[Шохрух Шаймардонов]

Drovosek01, так вы в base в аттрибут href пропишите полный путь а не относительный, он то и нужен, чтобы полный путь прописывать

Почитайте про base

[Drovosek01]

Шохрух Шаймардонов, заменил href на полный путь к папке, ситуация изменилась, буду гуглить дальше. Спасибо за наводку.

[Шохрух Шаймардонов]

Drovosek01, пожалуйста. Скиньте решение когда найдете, кому-то да пригодится