Angular 16 部署至Firebase失败求助

前置准备 #

• 全局更新 Firebase CLI 到最新版：npm install -g firebase-tools
• 登录 Firebase 账号：firebase login
• 先完成 Angular 生产构建：ng build --configuration production（Angular 16 默认构建输出到 dist/[你的项目名称]/browser，这是核心注意点）

初始化 Firebase Hosting（未初始化过的项目） #

1. 在项目根目录执行：firebase init hosting
2. 选择你要部署的 Firebase 目标项目
3. 输入public 目录路径时，务必填写 dist/[你的项目名称]/browser（比如项目叫 angular-demo，就填 dist/angular-demo/browser）
4. 询问是否配置为单页应用，选 Yes
5. 询问是否覆盖 index.html，选 No

修正已存在的 Firebase 配置 #

如果之前已经初始化过 Firebase，直接修改项目根目录的 firebase.json，确保 hosting 配置如下：

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

关键提醒：Angular 16 默认启用应用壳架构，构建输出会拆分出 browser 和 server 目录，必须指向 browser 目录才能正确部署，这是多数人踩坑的原因。

重新部署 #

1. 重新执行生产构建：ng build --configuration production
2. 部署到 Firebase：firebase deploy --only hosting

常见排查点 #

• 确认 dist/[你的项目名称]/browser 目录存在，且包含 index.html、assets 等构建产物
• 若仍报错，尝试清除 Angular 缓存后再构建：ng clean && ng build --configuration production

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