Angular/Fire安装报错Invalid project id及后续异常问题求助

问题 #

我正在开发Firebase登录认证页面，按照@angular/fire官方文档步骤操作：

1. 执行ng new angular_fbauth创建Angular项目
2. 运行ng add @angular/fire完成登录后，脚本直接报错：Invalid project id: angular_fbauth

我疑惑的是：为什么脚本会默认寻找和Angular项目同名的Firebase项目？明明一个Firebase项目可以关联多个应用，这是@angular/fire的预期机制吗？

我尝试过用firebase use命令明确指定Firebase项目，但仍出现相同报错。

编辑补充：我修改了angular.json中的项目名称，使其与Firebase项目ID（jldemo-7698d）一致，结果又出现了重复选择项目的提示框（弹窗内容为让用户选择关联的Firebase项目），这显然不符合预期流程。

解决方案 #

方法1：手动关联Firebase项目（无需修改Angular项目名） #

1. 确保已通过firebase login登录Firebase CLI，并用firebase use <你的Firebase项目ID>切换到目标项目
2. 执行firebase init hosting（仅需生成配置文件即可，无需覆盖Angular的部署设置），生成firebase.json和.firebaserc文件
3. 在Angular项目的app.module.ts中导入并初始化AngularFireModule：

import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase)
  ]
})
export class AppModule { }

4. 从Firebase控制台复制项目配置信息，粘贴到environments/environment.ts中：

export const environment = {
  production: false,
  firebase: {
    apiKey: "你的API密钥",
    authDomain: "你的认证域名",
    projectId: "你的Firebase项目ID",
    storageBucket: "你的存储桶地址",
    messagingSenderId: "你的消息发送者ID",
    appId: "你的应用ID"
  }
};

方法2：执行ng add时直接指定Firebase项目 #

运行ng add @angular/fire时通过参数明确指定目标Firebase项目ID，跳过自动匹配逻辑：

ng add @angular/fire --project <你的Firebase项目ID>

关于@angular/fire的自动匹配逻辑 #

ng add @angular/fire默认会尝试将Angular项目名称与Firebase项目ID做匹配，这是工具的简化适配逻辑，但并非强制规则——你完全可以通过上述两种方式，将任意Angular项目关联到任意Firebase项目，无需修改Angular项目名称。

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