Angular 6, развернутый в Firebase, не может загрузить CSS при просмотре маршрутов через URL-адрес или обновление
Если вы просматриваете здесь и используете мою навигационную панель для перехода к «обучающим материалам» ... все кажется прекрасным ... пока вы не попытаетесь обновить страницу с этого момента. Страница загружается, а маршрутизация все еще работает ... но весь CSS пропал ...
Я уже много гуглил, и вердикт, кажется, таков, что просто настроить json, как это, должно быть достаточно, чтобы предотвратить эту проблему в Firebase. Я могу подтвердить, что эта проблема возникает только в Firebase, когда я тестирую на локальном хосте, я могу обновиться без каких-либо проблем.
{
"hosting": {
"public": "dist/lessons",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
}
Что я делаю неправильно?
Я могу сказать вам одну вещь: ваш css импортирует что-то, что я понятия не имею, кроме как перейти к источникам, обновить и проверить файл css. То, что я здесь вижу, меня поражает, потому что ваше содержимое main.js отображается внутри вашего файла css. Также файл css перемещается с ./ на ./tutorials. Я сомневаюсь, что это как-то связано с развертыванием базы огня.
Это не позволит мне отправить здесь ответ ... У меня был типичный материал firebase.json, который предлагался для angular ... Оказывается, я небрежно удалил очень важную часть шаблонного html очень рано, когда я приводил в порядок. ... НЕ удаляйте <base href = "/"> из вашего html файла в SPA !!! Теперь все работает нормально.
Замените ссылку на снимок экрана вашего firebase.json фактическим содержимым этого файла. Это позволяет нам видеть, если без щелчка, делает его доступным для поиска, позволяет нам копировать его части, и в целом это хорошо.