Angular 6.0 firebase hosting deploy not working

问题:

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.

回答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

回答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

回答3:

it worked me after i remove cache and refresh browser, thanks.

回答4:

The second possible way is just to change outputPath in angular.json to dist, so the line will look like this "outputhPath": "dist"

回答5:

@bajran may have elborated all steps in detail but if you are migrating from angular 5 to 6, the only step that matters is, changing "public": "dist", to "public": "dist/your_project_name", in firebase.json

回答6:

There's one more issue that can lead to this very same page. When we init the project by using the

firebase init

command and following the procedure, it by default overwrites the index.html file. So, if already built(to get the dist/_Project_Folder) the index.html file is overwritten. Built it again after

firebase init 
ng build --prod

回答7:

The problem is that on the question

File dist/apps/ditectrev/index.html already exists. Overwrite?

If you'll type Y for Yes, then it'll create its own index.html file, generated by Firebase. Giving this N for No I was able to keep my original index.html, which was generated after using ng build --prod in dist/apps/ditectrev. Note: I'm using Nx workspace, but the same should apply for other Angular projects. In normal Angular project case it would be different path, which would be simply dist.

回答8:

If u don`t have a single page app (like me), when Firebase ask

File dist/apps/ditectrev/index.html already exists. Overwrite?

Write N. I have tried so many times before figure out

回答9:

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.