Angular 18单页应用部署Firebase遇阻：操作无响应、部署目标缺失

问题描述 #

更新补充 #

• 新建未修改的Angular项目重复部署流程，仍出现相同错误
• 不选择任何功能时，执行ng deploy无响应，不符合预期
• 首次使用Angular，未刻意配置全局环境，怀疑存在无意操作引发问题
• 可接受更换Firebase之外的部署平台

原部署流程及异常 #

本地运行正常的Angular 18单页应用，尝试部署到Firebase的步骤如下，过程中出现异常：

1. 已注册Firebase账号并创建项目
2. 安装Firebase工具：

   npm install -g firebase-tools
   

3. 添加Angular Fire依赖：

   ng add @angular/fire
   

   终端提示选择功能：

   % ng add @angular/fire
   Skipping installation: Package already installed
   UPDATE package.json (1137 bytes)
   ✔ Packages installed successfully.
   ? What features would you like to setup? (Press <space> to select, <a> to toggle
   all, <i> to invert selection, and <enter> to proceed)
   ❯◯ Authentication
    ◯ Google Analytics
    ◯ App Check
    ◯ Firestore
    ◯ Realtime Database
    ◯ Cloud Functions (callable)
    ◯ Cloud Messaging
   (Move up and down to reveal more choices)
   

   • 直接回车（不选任何功能）：立即返回Shell提示符，无后续配置操作
   • 选择Google Analytics后：
     • 提示选择Firebase账号（附带punycode弃用警告）
     • 选中目标项目后，提示选择应用
     • 选择已创建的应用：流程完成，输出Downloading configuration data of your Firebase WEB app UPDATE src/app/app.config.ts (2989 bytes)，但Firebase控制台无可见变化
     • 选择[CREATE NEW APP]：新应用出现在Firebase控制台，但无后续部署指引
4. 执行ng deploy时触发错误：

   Cannot find "deploy" target for the specified project.
   You can add a package that implements these capabilities.
   
   For example:
     Amazon S3: ng add @jefiozie/ngx-aws-deploy
     Firebase: ng add @angular/fire
     Netlify: ng add @netlify-builder/deploy
     GitHub Pages: ng add angular-cli-ghpages
   
   Would you like to add a package with "deploy" capabilities now? (Use arrow keys)
   ❯ No
     Amazon S3
     Firebase
     Netlify
     GitHub Pages
   

   重复操作后问题未解决

解决方法 #

修复Firebase部署流程 #

1. 检查并手动配置angular.json
   执行ng add @angular/fire后，若angular.json中未生成deploy目标，手动添加：
   在项目的architect节点下插入：

   "deploy": {
     "builder": "@angular/fire:deploy",
     "options": {
       "projectId": "你的Firebase项目ID"
     }
   }
   

   项目ID可在Firebase控制台的「项目设置」中获取。

2. 用Firebase CLI直接初始化部署
   跳过ng add @angular/fire的功能选择，直接通过Firebase CLI配置：

   # 登录Firebase账号
   firebase login
   # 初始化托管服务
   firebase init hosting
   

   初始化时选择目标Firebase项目，设置public目录为dist/你的项目名称/browser（Angular 18默认编译输出路径），确认配置为单页应用（输入Y）。
   完成后执行编译+部署：

   ng build
   firebase deploy
   

3. 确保依赖版本兼容
   Angular 18需要匹配最新版@angular/fire，执行更新：

   npm update @angular/fire
   

替代部署方案（以Netlify为例） #

若不想使用Firebase，Netlify部署流程更简洁：

1. 安装Netlify部署插件：

   ng add @netlify-builder/deploy
   

2. 按照终端提示登录Netlify账号，选择或创建新站点
3. 执行部署：

   ng deploy
   

   也可直接编译项目，将dist目录拖放到Netlify控制台完成部署。

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