Angular新手部署Firebase应用后显示默认页面问题求助

Hey there! I’ve helped a lot of Angular newbies work through this exact Firebase Hosting issue—let’s get your app showing up instead of that default welcome page. Here’s what to check step by step:

• Double-check your Angular build output
  First, make sure your local build is generating the right files. Run ng build (use ng build --prod if you’re on an older Angular version) and navigate to the dist folder. Open the index.html file inside—does it have your app’s content, not Firebase’s welcome message? Also, note that newer Angular versions build into a subfolder under dist (like dist/your-app-name), so don’t miss that detail.

• Verify your Firebase Hosting path
  Open your firebase.json file and look at the hosting.public value. This needs to point directly to your Angular app’s build folder. For example, if your app is named angular-todo-app, the path should be "dist/angular-todo-app"—not just "dist". If this is wrong, Firebase can’t find your app’s index.html and falls back to the default page.

• Force a clean deployment to bypass caching
  Sometimes cached files can keep the default page visible even after you’ve uploaded your app. Try redeploying with the --force flag to ensure fresh files are uploaded:

  firebase deploy --only hosting --force
  

  You can also test locally first with firebase serve—if the local preview shows your app correctly, the issue is almost certainly related to deployment caching or incorrect path configuration.

• Compare local and Firebase index.html files
  Head to your Firebase Console, go to the Hosting section, and use the file browser to view the root index.html file. Compare it to the one in your local dist folder. If they don’t match, that means the wrong files were uploaded. Re-run the build command and make sure you’re deploying from the correct directory.

• Check your single-page app rewrite rules
  Since you configured Firebase for a single-page app, confirm your firebase.json has the correct rewrite setup. It should look something like this:

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

  While missing rewrites usually cause routing issues (not the default page), it’s worth confirming this is set up right just in case.

Give these steps a try—chances are one of them will fix the problem! 😊

内容的提问来源于stack exchange，提问作者Vini