Angular构造函数注入Firebase Database导致站点崩溃问题

问题 #

在Angular项目中集成Firebase实时数据库时，按照教程在组件构造函数中添加public database: Database后，站点无法正常加载。

相关代码 #

HTML #

<form #RegisterForm = "ngForm" (ngSubmi)="registerUser(RegisterForm.value)">
    <input type="text" ngModel id="username" name="username">
    <input type="text" ngModel id="username" name="username">
    <input type="text" ngModel id="username" name="username">
    <input type="submit" ngModel id="saveData" name="signup_submit" value="Register User">
</form>

TS #

constructor( private cartService: CartInfoService, public database: Database){}

registerUser(value: any){
    set(ref(this.database, 'users/'+value.username),{
      username: value.username,
      first_name: value.first_name,
      profile_pic: value.last_name
    })
    alert('user created!')
}

导入语句 #

import { getDatabase, set, update, ref, onValue, Database} from "firebase/database";

原因分析 #

核心问题是**Database是Firebase提供的类型标识，并非Angular可依赖注入的服务实例**。Angular的依赖注入系统只能注入已在模块/组件中声明提供的服务，直接将Database类型放入构造函数会导致DI系统无法找到对应的提供者，从而抛出错误阻塞站点加载。

另外代码中还有两处次要问题：

• HTML表单的提交事件拼写错误：(ngSubmi)应为(ngSubmit)
• 多个输入框使用相同的name="username"，会导致表单值覆盖，无法正确获取first_name、last_name等字段
• 提交按钮无需添加ngModel指令

解决方案 #

步骤1：确保Firebase应用已正确初始化 #

在项目的根模块（如app.module.ts）或单独的Firebase配置文件中完成初始化：

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// Firebase配置信息
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 获取数据库实例
export const db = getDatabase(app);

步骤2：修正组件代码 #

移除构造函数中的Database注入，直接使用初始化好的数据库实例：

import { db } from '../path-to-your-firebase-config'; // 替换为你的配置文件路径
import { set, ref } from "firebase/database";

// ...

constructor( private cartService: CartInfoService ){} // 移除Database参数

registerUser(value: any){
    set(ref(db, 'users/'+value.username),{
      username: value.username,
      first_name: value.first_name,
      profile_pic: value.last_name
    })
    alert('user created!')
}

步骤3：修正HTML表单错误 #

<form #RegisterForm="ngForm" (ngSubmit)="registerUser(RegisterForm.value)">
    <input type="text" ngModel id="username" name="username" placeholder="用户名">
    <input type="text" ngModel id="first_name" name="first_name" placeholder="名字">
    <input type="text" ngModel id="last_name" name="last_name" placeholder="姓氏">
    <input type="submit" id="saveData" value="Register User">
</form>

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