Angular 6.0 firebase hosting deploy not working
Solution 1
I found that the ng build --prod
will create a dist
and an another subfolder under this where the project location is.
dist
|--TheProject_Folder
| |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init
So what I did is to initialize again the firebase init
and change the public directory from dist
to 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
Solution 2
Below is step by step process to host angular6.0 app on firebase
1] npm install -g firebase-tool
Install firebase tool
2] firebase login
Use the CLI tools to login in Firebase.
After connecting to our account/Gmail-account, we will get the firebase CLI Login Successfull message in browser
3] firebase init
Here are the answers to the questions Firebase tools will ask:
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites? What do you want to use as your public directory? dist
(This is important! Angular creates the dist folder.)
? Configure as a single-page app (rewrite all urls to /index. html)? Yes
4] ng build --prod
This will create a brand new dist/ folder in our project with the files necessary to launch our app.
5] Before deploying the app, go to firebase.json file and specify your project public field like this
"public": "dist/your_project_name",
6] Now deploy the project in firebase using below command
firebase deploy
After depolying you will get the below message
- Deploy complete!
Project Console: https://************ [you will get the actual url name rather than stars]
Hosting URL: https://************* [you will get the actual url name rather than stars]
you can access the website by the URL given in Hosting URL
Solution 3
it worked me after i remove cache and refresh browser, thanks.
Solution 4
The second possible way is just to change outputPath in angular.json to dist, so the line will look like this "outputhPath": "dist"
Solution 5
It worked when I cleared the cache with ctrl+shift+R
hard reset on the web! Make sure the correct index.html
file is being deployed on firebase.
dotGitignore
Have a problem with your code? then, let me help you.
Updated on July 15, 2022Comments
-
dotGitignore almost 2 years
I am looking for a tutorial on how to properly setup the
firebase-tools
hosting on my angular 6.0 projects, and what I found is always like this.- 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
but after doing this, this is always what I've got.