Angular应用部署至Firebase Hosting后无法运行，页面无限加载

针对你遇到的情况，可以从以下几个方向排查解决：

• 确认构建模式为生产环境
  开发模式构建的代码包含大量调试逻辑，可能导致加载异常，务必使用生产模式构建命令：

  ng build --configuration production
  

  旧版本Angular可使用：

  ng build --prod
  

• 检查base href配置
  打开dist/my-app/index.html，确认<base href="/">是否匹配你的部署路径。如果部署到Firebase Hosting的子路径，需在构建时指定：

  ng build --configuration production --base-href="/your-sub-path/"
  

• 查看浏览器控制台错误
  按下F12打开开发者工具，切换到Console和Network标签：

  • 检查是否有JS未捕获异常，这类错误会直接阻断Angular初始化
  • 检查是否有静态资源（JS/CSS/图片）返回404，资源加载失败会导致应用无法启动

• 清除Firebase缓存
  旧缓存残留可能引发加载异常，执行命令清除缓存：

  firebase hosting:clear-cache
  

  也可以在firebase.json中配置缓存规则，避免index.html被缓存：

  "hosting": {
    // 保留现有配置
    "headers": [
      {
        "source": "index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
  

• 排查路由配置问题
  检查Angular路由模块：

  • 是否存在重定向循环（比如根路由重定向到某路径，该路径又重定向回根路由）
  • 若使用默认的PathLocationStrategy，你的rewrites配置是正确的，但要避免路由路径与静态资源路径冲突
  • 可临时切换为HashLocationStrategy测试：在AppRoutingModule的RouterModule.forRoot中添加useHash: true

• 更新Firebase CLI
  旧版本CLI可能存在兼容性问题，更新后重新部署：

  npm install -g firebase-tools
  firebase deploy --only hosting
  

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