Я ищу учебник о том, как правильно настроить хостинг 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
но после этого это всегда то, что у меня есть.
Я обнаружил, что 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/TheProject_Folder каталог с 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
Ниже приведен пошаговый процесс для размещения приложения angular6.0 на firebase.
1] npm install -g firebase-tool Установить инструмент npm install -g firebase-tool
2] firebase login Используйте инструменты CLI для входа в Firebase.
После подключения к нашей учетной записи /Gmail-аккаунту мы получим сообщение FirelBase CLI Login Successful в браузере.
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, используя команду ниже
развертывание пожарной базы
После удаления вы получите сообщение ниже
- Развертывание завершено!
Консоль проекта: https://************ [вы получите реальное имя URL, а не звездочки]
URL хостинга: https://************* [вы получите реальное имя URL, а не звездочки]
Вы можете получить доступ к веб-сайту по URL, указанному в URL хостинга
это сработало у меня после того, как я удалил кеш и обновил браузер, спасибо.
Второй возможный способ - просто изменить outputPath в angular.json на dist, поэтому строка будет выглядеть так: "outputhPath": "dist"
@bajran, возможно, подробно описал все шаги, но если вы переходите с углового значения 5 на 6, единственный важный шаг - это изменить "public": "dist", на "public": "dist/your_project_name", в firebase. JSON
Есть еще одна проблема, которая может привести к этой же самой странице. Когда мы начинаем проект с помощью
firebase init
и, следуя процедуре, по умолчанию перезаписывает файл index.html. Таким образом, если файл уже собран (для получения dist/_Project_Folder), файл index.html будет перезаписан. Построил его снова после
firebase init
ng build --prod
Проблема в том, что на вопрос
Файл dist/apps/ditectrev/index.html уже существует. Переписать?
Если вы введете Y для Да, тогда он создаст свой собственный файл index.html, сгенерированный Firebase. Предоставив это N для Нет, я смог сохранить свой оригинальный index.html, который был сгенерирован после использования ng build --prod в dist/apps/ditectrev. Примечание: я использую рабочее пространство Nx, но то же самое должно применяться к другим проектам Angular. В обычном случае проекта Angular это будет другой путь, который будет просто dist.
Мои действия по развертыванию Angular 7.2.15 в Firebase:
Запустите firebase init
Затем:
нг сборка --prod
После этого проект имеет следующую структуру:
-.firebase
-dist
- myapp
-node_modules
-myapp
- dist
-myapp
-public
-.firebaserc
-.gitignore
-.firebase.jsom
-package-lock.json
Затем вы должны скопировать ВСЕ ФАЙЛЫ из myapp/dist/myapp в dist/myapp.
Затем запустите firebase deploy
Если у вас нет одностраничного приложения (как у меня), когда Firebase спросит
File dist/apps/ditectrev/index.html already exists. Overwrite?
Напиши Н. Я пробовал так много раз, прежде чем выяснить
Это сработало, когда я очистил кеш с помощью ctrl+shift+R аппаратного сброса в сети! Убедитесь, что правильный файл index.html развертывается на базе Firebase.