web-dev-qa-db-fra.com

Angular 6.0 déploiement d'hébergement Firebase ne fonctionne pas

Je recherche un tutoriel sur la façon de configurer correctement le firebase-tools hébergement sur mes angular 6.0, et ce que j'ai trouvé est toujours comme ça.

- 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

mais après avoir fait ça, c'est toujours ce que j'ai.

default

angularfirebase-hostingfirebase-tools
22
dotGitignore

J'ai trouvé que le ng build --prod créera un dist et un autre sous-dossier sous celui-ci où se trouve l'emplacement du projet.

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

Donc, ce que j'ai fait, c'est d'initialiser à nouveau le firebase init et changez répertoire public de 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
23
dotGitignore

Ci-dessous, le processus étape par étape pour héberger l'application angular6.0 sur Firebase

1] npm install -g firebase-tool Installer l'outil Firebase

2] firebase login Utilisez les outils CLI pour vous connecter à Firebase.

Après la connexion à notre compte/compte Gmail, nous recevrons le message Firebase CLI Login Successfull dans le navigateur

3] firebase init

Voici les réponses aux questions que les outils Firebase poseront:

? Êtes-vous prêt à continuer? Oui
? Quelles fonctionnalités CLI Firebase souhaitez-vous configurer pour ce dossier? Appuyez sur Espace pour sélectionner les fonctionnalités, puis sur Entrée pour confirmer vos choix. Hébergement: Configurer et déployer des sites d'hébergement Firebase

? Que voulez-vous utiliser comme annuaire public? dist(This is important! Angular creates the dist folder.)

? Configurer comme une application d'une seule page (réécrire toutes les URL dans/index. Html)? Oui

4] ng build --prod

Cela va créer un tout nouveau dist/dossier dans notre projet avec les fichiers nécessaires pour lancer notre application.

5] Avant de déployer l'application, accédez au fichier firebase.json et spécifiez le champ public de votre projet comme celui-ci

"public": "dist/your_project_name",

6] Déployez maintenant le projet dans Firebase en utilisant la commande ci-dessous

déploiement de Firebase

Après dépolissage, vous obtiendrez le message ci-dessous

  • Déploiement terminé!

Console de projet: https: // ************ [vous obtiendrez le nom réel de l'url plutôt que les étoiles]

URL d'hébergement: https: // ************* [vous obtiendrez le nom réel de l'url plutôt que les étoiles]

vous pouvez accéder au site Web par l'URL indiquée dans l'URL d'hébergement

15
bajran

cela m'a fonctionné après avoir supprimé le cache et actualisé le navigateur, merci.

5
user698314

La deuxième façon possible consiste simplement à remplacer outputPath dans angular.json par dist, de sorte que la ligne ressemblera à ceci "outputhPath": "dist"

4
Josef Katič

@bajran peut avoir détaillé toutes les étapes en détail, mais si vous migrez de angular 5 à 6, la seule étape qui compte est de changer "public": "dist", à "public": "dist/your_project_name", dans firebase.json

0
ishandutta2007

Le problème est que sur la question

Le fichier dist/apps/ditectrev/index.html existe déjà. Écraser?

Si vous tapez Y pour Oui, alors il créera son propre fichier index.html, généré par Firebase. Donner ceci N pour Non J'ai pu conserver mon original index.html, qui a été généré après avoir utilisé ng build --prod dans dist/apps/ditectrev. Remarque: J'utilise l'espace de travail Nx, mais la même chose devrait s'appliquer pour les autres projets Angular. Dans le cas normal du projet Angular, ce serait un chemin différent, ce qui être simplement dist.

0
Daniel Danielecki

Il y a un autre problème qui peut conduire à cette même page. Lorsque nous initions le projet en utilisant le

firebase init

et en suivant la procédure, il écrase par défaut le fichier index.html. Donc, s'il est déjà construit (pour obtenir le dossier dist/_Project_Folder), le fichier index.html est écrasé. Reconstruit après

firebase init 
ng build --prod
0
DHRUV GAJWA