Angular2应用部署Firebase Hosting后显示默认页面求助

Hey there, let's troubleshoot why your Angular 2 app is stuck showing Firebase's default page instead of your own work. I’ve dealt with this exact issue a few times, so here are the most likely fixes to walk through:

The first thing to verify is that your Firebase config is pointing to the right folder where your Angular build lives.

• Open your project's firebase.json file and look for the hosting > public field. This path must point to your Angular app's production build output. For Angular 2, this is usually the dist/[your-app-name] folder (or just dist if your setup is simpler).

  Here's what a correct config should look like:

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

• If you're unsure of the exact path, run ng build --prod first, then check the dist folder in your project root to see the structure. Update the public path to match.

It's easy to skip the build step and deploy old (or non-existent) files—don't worry, we've all done it. Follow this exact sequence:

1. Clean out old build files to avoid leftovers:
   • Mac/Linux: rm -rf dist
   • Windows: rmdir /s dist
2. Build your app for production (critical for Angular 2): ng build --prod
3. Deploy only the hosting portion: firebase deploy --only hosting

Firebase caches content really well, which can mean your browser (or Firebase's edge servers) are still serving the old default page. Try these fixes:

• Do a hard refresh of your site: Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac)
• Test in a private/incognito window to rule out local browser cache
• Force a full cache refresh during deployment: firebase deploy --only hosting --force

Sometimes you might accidentally link your local project to the wrong Firebase instance. Run firebase use in your terminal to see which project you're currently connected to. If it's not the one you intended:

• Run firebase use [your-correct-project-id] to switch
• Re-deploy with firebase deploy --only hosting

Open the dist folder (or whatever path you set in firebase.json) and make sure it contains:

• Your main index.html file
• Compiled js bundles, css files, and other static assets

If the folder is empty or missing files, your ng build --prod command probably failed. Check the terminal output from the build step for errors (like missing dependencies or configuration issues).

If none of these steps fix the issue, share your firebase.json content and a quick overview of your dist folder structure, and we can dig deeper!

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