Hosting Angular Project on Firebase

4
votes

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:

enter image description here

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:

enter image description here

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

enter image description here

4
angularfirebasehostingfirebase-hosting
have you run firebase deploy yet? - Drei
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
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
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
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

4 Answers

0
votes

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.

0
votes

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

0
votes

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)

0
votes

My actions to deploy Angular 7.2.15 to Firebase:

  1. 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

  2. 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

  1. Then you should copy ALL FILES from myapp/dist/myapp into dist/myapp.

  2. Then run firebase deploy