Unable to host my angular app on firebase

Question

I am trying to deploy my app on firebase and followed all steps to deploy app on firebase and every thing working as expected but and and while I browse my app on firebase URL its showing below message on browser.

Unable to find whats going wrong while deploying app.

Any hint how can I solve this issue ?

Below is my log while depolying it on firebase :

MYMAC-M-34RS:WeatherDemo user$ ng build --prod
Date: 2018-04-27T09:49:07.120Z                                                          
Hash: ab47fb71fe9008d24831
Time: 39656ms
chunk {0} polyfills.b6b2cd0d4c472ac3ac12.bundle.js (polyfills) 59.7 kB [initial] [rendered]
chunk {1} main.a17f9a5eb0ac9ec8e538.bundle.js (main) 523 kB [initial] [rendered]
chunk {2} styles.8680ebdddce4fbcb4153.bundle.css (styles) 229 kB [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]
MYMAC-M-34RS:WeatherDemo user$ firebase login
Already logged in as [email protected]
MYMAC-M-34RS:WeatherDemo user$ firebase init

 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
 🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
 🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
 🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
 🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  /Volumes/DATA/Projects/experiments/Angular-5/Demo/WeatherDemo

Before we get started, keep in mind:

  * You are currently outside your home directory
  * You are initializing in an existing Firebase project directory

? 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

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, skipping

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

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

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

MYMAC-M-34RS:WeatherDemo user$ firebase deploy

=== Deploying to 'alarm-6b7dc'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
✔  hosting: 15 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/xxx/xxx-6b7dc/overview
Hosting URL: https://xxx-6b7dc.firebaseapp.com
MYMAC-M-34RS:WeatherDemo user$ 

Answer 1

Everything seems to be ok with your Project creation (and initial deployment). What you get at https://alarm-6b7dc.firebaseapp.com is the default index.html page. You now have to modify this index.html and add the folders and files corresponding to your angular app.

You just have to replicate in the same folder you find the index.html (in the Firebase project; i.e. under Projects/experiments/Angular-5/Demo/WeatherDemo/dist) your distribution folder(s) from angular.

And then re-deploy with the correct command, i.e. firebase deploy

You may have a look at the CLI commands doc: https://firebase.google.com/docs/cli/#deployment

Answer 2

I also faced the same problem. You can intialize firebase before or after build. But the thing is we have to answer no when it is asking for overwrite of index.html. Here i am specifying public directory as dist/MyAngularProject because after building the angular app build files are created inside MyAngularProject folder.

? What do you want to use as your public directory? dist/MyAngularProject
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/MyAngularProject/index.html already exists. Overwrite? No
i  Skipping write of dist/MyAngularProject/index.html

i  Writing configuration info to firebase.json...                                                                       
i  Writing project information to .firebaserc...

+ Firebase initialization complete!

Answer 3

It is because you selected "Yes" in overwrite option.

? File dist/index.html already exists. Overwrite? Yes

So default firebase index.html file overwrote your index.html file. You have to recreate your index.html file, and retry with firebase deploy.