Hosting Angular Project on Firebase

Question

I am trying to host my Angular(5) project on Firebase and I am able to deploy my application but when I do this is what the host shows at my project URL:

It seems like I am able to deploy a hosting service using Firebase but it is not actually using my Angular project, instead just a default Firebase hosting screen. My firebase.json file is currently set up like below:

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Additionally, I ran ng build --prod --aot=false beforehand to build a production folder in my angular project under 'dist'. Why is my project not showing up at the URL? The dist folder structure is as such:

Also, here is my configuration for setting up Firebase init:

Yes and it deploys successfully but then the web page just shows the first picture in my post instead of my actual angular application — FrankTheTank, Apr 07 '18 at 17:59
From the looks of that folder, index.html was changed. When you ran `firebase init` did you say "no" when it asked to rewrite index.html because it already exists? — Drei, Apr 07 '18 at 18:00
I did but the app wasn't working so I replaced that index.html file with my actual one to see if anything changed and it still was that screen which is weird to me cause the code to show that screen isn't even there — FrankTheTank, Apr 07 '18 at 18:01
Yes, replacing the index.html file wouldn't work because it has to be compiled by angular. I would suggest rebuilding the proj, then running only `firebase deploy`. If you still have no luck, more information will be needed because it doesn't seem like a firebase issue at that point — Drei, Apr 07 '18 at 18:07
Ya I redid the firebase init with the parameters above in the last picture and I still have the same problem. — FrankTheTank, Apr 07 '18 at 18:08
After running `init` with those setting, you wont need to `init` again. If `deploy` continues to work improperly, you are going to need to provide more info. — Drei, Apr 07 '18 at 18:15
Also, final note, you first image shouldn't show up at the site if anything has been deployed. You can always check if anything is deployed at the url in the deployment history of the hosting section of the firebaae console. — Drei, Apr 07 '18 at 18:19
Ya when I go to my firebase console and look at hosting the url takes me to a screen with my first image — FrankTheTank, Apr 07 '18 at 18:25
And it shows in my deployment history as having a current deployment — FrankTheTank, Apr 07 '18 at 18:25
Check the below solution [https://stackoverflow.com/questions/50360477/angular-6-0-firebase-hosting-deploy-not-working/51809723#51809723](https://stackoverflow.com/questions/50360477/angular-6-0-firebase-hosting-deploy-not-working/51809723#51809723) — bajran, Aug 12 '18 at 14:41

score 0 · Answer 1 · answered Jul 03 '18 at 22:00

Can you provide the full tree directory of your app ?

I have a Angular application hosted in Firebase Hosting and my firebase.json is similar as yours but not this line :

{
  "hosting": {
    "public": "public/dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Could be a solution ... or not. It depends on your directory tree. Please share your directory tree to compare.

score 0 · Answer 2 · answered Aug 05 '18 at 13:12

In Angular 6 you need to add the project name at the public property.

{
  "hosting": {
    "public": "dist/projectName",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

You need the dist because that is the folder where the production files can be found when you execute the ng build --prod command

score 0 · Answer 3 · answered Aug 20 '18 at 10:42

step 1 : ng build --prod after step 1 in src/app/ --> dist folder with deploy/hosting content will be created/updated

step 2: firebase deploy -p dist/< Enter Your Project Name here > ex: (test is project name) : firebase deploy -p dist/test

in 2nd step deploy of files in dist folder to firebase hosting (as u can see this files in firebase console)

score 0 · Answer 4 · answered Jun 14 '19 at 22:35

My actions to deploy Angular 7.2.15 to Firebase:

Run firebase init
- Are you ready to proceed? Yes
- Which Firebase CLI features do you want to set up 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
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- File dist/index.html already exists. Overwrite? No Skipping write of dist/index.html
Then:

ng build --prod

After that the project has the following structure:

-.firebase
-dist
 - myapp
-node_modules
-myapp
  - dist
    -myapp
-public
-.firebaserc
-.gitignore
-.firebase.jsom
-package-lock.json

Then you should copy ALL FILES from myapp/dist/myapp into dist/myapp.
Then run firebase deploy

Hosting Angular Project on Firebase

4 Answers4