Angular+Firebase项目部署后页面空白，本地运行正常求助

以下是针对本地正常、多平台部署后空白问题的排查步骤：

1. 先验证本地构建产物是否正常 #

执行生产构建命令：

ng build --prod

然后用静态服务器运行构建后的dist文件夹：

npx serve dist/[你的项目名称]

如果本地打开这个服务后页面依然空白，说明问题出在构建环节，而非部署平台。此时重点排查构建日志中的错误或警告。

2. 检查基础路径(base href)配置 #

• 若部署在子路径下（如https://xxx.netlify.app/my-app/），需修改index.html中的<base href="/">为对应子路径，或构建时指定：

  ng build --base-href /my-app/
  

• 若部署在根域名，确认<base href="/">没有多余空格或错误字符。

3. 查看浏览器控制台错误（最关键） #

部署后打开页面，按F12进入控制台，重点关注：

• 资源加载错误：你index.html中的Google Fonts链接存在空格（? family=），需修正为：

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  

• Firebase初始化错误：确认生产环境的environment.prod.ts中Firebase配置（apiKey、authDomain等）与控制台一致，未使用本地测试配置。
• CORS或权限错误：检查Firestore的安全规则是否允许生产环境域名访问，是否存在跨域限制。

4. 路由配置适配部署平台 #

如果使用PathLocationStrategy（Angular默认路由模式），需在部署平台配置重写规则，确保所有路由请求都指向index.html：

• Netlify：在项目根目录创建_redirects文件，内容为：

  /* /index.html 200
  

• Firebase Hosting：在firebase.json中添加rewrites配置：

  "hosting": {
    "public": "dist/[你的项目名称]",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
  

• Heroku：若使用静态文件托管，需在服务器配置中添加重定向（如Express服务器需捕获所有路由并返回index.html）。

5. 检查资源路径与assets配置 #

确认angular.json中assets配置正确，构建后资源路径无误：

• 图标路径./assets/envolti-dark.png可改为绝对路径/assets/envolti-dark.png（配合<base href="/">），避免相对路径在子路由下出错。
• 查看dist文件夹中index.html的资源引用，确认所有脚本、样式、资源路径正确。

6. 排查依赖与版本兼容 #

• 确认Angular版本与Firebase、AngularFire版本兼容（可参考AngularFire官方文档的版本对应表）。
• 构建时查看终端输出，是否存在模块缺失、编译错误或警告，比如未正确导入Firestore模块等。

内容的提问来源于stack exchange，提问作者Vinícius Kock