firebase hosting of Angular2 app showing blank page

Question

I have developed an angular2 app. I run through procedure of firebase hosting. But it is showing a default page not my app.

Please help

Answer 1

After building your app with ng build --prod, it will create a dist folder with production files. While running firebase init, you will want to set your public directory to dist instead of using the default public/ directory.

Answer 2

I have had a similar problem. I redeployed the app several times and had always the same result, like in the picture above.

Problem:

If you do not choose dist as public directory and if you later replace the index.html. Then Firebase overwrites the index.html in your project.

Solution:

I solved this issue by just replacing the index.html with one from another project.

Next time follow these instructions:

https://angularfirebase.com/lessons/deploying-an-angular-app-to-firebase/

Answer 3

First find out in which folder is your index.html file, make sure it's the index.html that you wrote, cause firebase might put a mock index.html in the 'public' folder and move your index.html in the 'dist' folder, it might also have another folder with the name of your app inside the 'dist' folder. So either copy your original index.html and put it in the 'public' folder in the place of the mock, or go in the firebase.json file and change the 'public' property to the name of the folder where your index.html file is:

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

OR

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

Also check the base reference inside of your index.html file, if it's <base href="/"> change it to the name of your app like <base href="/my-app/"> you can also use the command line to do it, just write: ng build --prod --base-href /my-app/

Answer 4

1. Check your angular.json for outputPath, index and browser keys following the documentation:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist/project-name"
            },
            "index": "src/index.html",
            "browser": "src/main.ts"
          }
        }
}

2. ng build in Angular v18+ creates an output that looks like:

3. Your firebase.json points to the correct folder and you have a rewrites config in case your user tries to access http://hosting-server-url:5000/random-page:

"hosting": [
    {
      "target": "project-name",
      "public": "dist/project-name/browser",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]

After mentioned in other solutions, in case the error persists, check the index.html generated by ng build.

• If you did not define an outputPath in the angular.json, make sure <base href="/"> points to the correct folder
• Some older browsers like Safari v16 might not support modulepreload out of the box (<link rel="modulepreload" href="chunk-TOHQMH5J.js">) so loading the app will output errors in the browser console.

Happy coding :)