Angular 6.0 firebase хостинг не работает

Question

Я ищу учебник о том, как правильно настроить хостинг firebase-tools в моих проектах angular 6.0, и то, что я обнаружил, всегда так.

- firebase init 
- then select the Hosting
- What do you want to use as your public directory? dist
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
- ng build --prod
- firebase deploy

, но после этого этовсегда то, что у меня есть.

Answer 1

Есть еще одна проблема, которая может привести к этой же самой странице.Когда мы запускаем проект с помощью команды

firebase init

и следуем процедуре, он по умолчанию перезаписывает файл index.html.Таким образом, если файл уже собран (для получения dist / _Project_Folder), файл index.html будет перезаписан.Построил его снова после

firebase init 
ng build --prod

Answer 2

Проблема в том, что на вопрос

Файл dist / apps / ditectrev / index.html уже существует. Переписать?

Если вы введете Y для Да , тогда он создаст свой собственный файл index.html, сгенерированный Firebase. Дав это N для № , я смог сохранить свой исходный index.html , который был сгенерирован после использования ng build --prod в dist/apps/ditectrev. Примечание: я использую рабочее пространство Nx, но то же самое должно применяться к другим проектам Angular. В обычном случае проекта Angular это будет другой путь, который будет просто dist.

Answer 3

@ bajran, возможно, подробно описал все этапы, но если вы переходите с углового 5 на 6, единственный важный шаг - изменить "public": "dist", на "public": "dist/your_project_name", в firebase.json

Answer 4

это сработало после удаления кеша и обновления браузера, спасибо.

Answer 5

Ниже приведен пошаговый процесс для размещения приложения angular6.0 на firebase

1] npm install -g firebase-tool Установка инструмента firebase

2] firebase login Использование инструментов CLI для входа в Firebase.

После подключения к нашей учетной записи / Gmail-аккаунту мы получим сообщение firebase CLI Login успешное в браузере

3] firebase init

Вот ответы на вопросы, которые зададут инструменты Firebase:

?Вы готовы продолжить? Да
?Какие функции Firebase CLI вы хотите настроить для этой папки?Нажмите пробел, чтобы выбрать функции, затем нажмите Enter, чтобы подтвердить свой выбор. Хостинг: настройка и развертывание сайтов хостинга Firebase

?Что вы хотите использовать в качестве публичного каталога? dist (This is important! Angular creates the dist folder.)

?Настроить как одностраничное приложение (переписать все URL в / index. Html)? Да

4] ng build --prod

Это создаст новую папку dist / в нашем проекте с файлами, необходимыми для запуска нашего приложения.

5] Перед развертыванием приложения перейдите в файл firebase.json и укажите открытое поле вашего проекта, например:

"public": "dist/your_project_name",

6] Теперь разверните проект в firebase, используя нижекоманда

firebase deploy

После развертывания вы получите следующее сообщение

• Развертывание завершено!

Консоль проекта: https://************ [вы получите фактическое имя URL-адреса, а не звездочки]

URL-адрес хостинга: https://************* [вы получите фактическое имя URL-адреса, а не звездочки]

Вы можете получить доступ к сайту по URL-адресу, указанному в URL-адресе хостинга

Answer 6

Второй возможный способ - просто изменить outputPath в angular.json на dist, чтобы строка выглядела следующим образом "outputhPath": "dist"

Answer 7

Я обнаружил, что ng build --prod создаст dist и еще одну подпапку в этой папке, где находится местоположение проекта.

dist
|--TheProject_Folder
|  |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init

Итак, я снова инициализировал firebase init иизменить публичный каталог с dist на dist/TheProject_Folder:

- What do you want to use as your public directory? dist/TheProject_Folder
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No