使用AngularFireDatabase访问Firebase实时数据库时遇NullInjectorError

出现这个错误是因为AngularFire的数据库模块没有被正确导入到你的Angular模块中，Angular无法找到AngularFireDatabase的注入提供者。按照以下步骤修复：

1. 确保Firebase环境配置正确 #

在environment.ts中添加你的Firebase项目配置：

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

2. 在根模块（AppModule）中导入必要的AngularFire模块 #

修改app.module.ts，导入AngularFireModule和AngularFireDatabaseModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 初始化AngularFire
    AngularFireModule.initializeApp(environment.firebase),
    // 导入实时数据库模块
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 优化服务方法（可选） #

当前getAccessLavel仅打印Observable，你可以返回Observable以便组件订阅获取数据：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
providedIn: 'root',
})
export class AccessLavelService {
constructor( private db: AngularFireDatabase ) {}

    getAccessLavel(): Observable<any[]> {
        // 通过snapshotChanges()获取含元数据的快照，用map提取数据和key
        return this.db.list('/g-access-lavel').snapshotChanges().pipe(
            map(changes => 
                changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
            )
        );
    }
}

4. 在组件中订阅数据 #

在组件中调用服务方法并订阅获取数据：

import { Component, OnInit } from '@angular/core';
import { AccessLavelService } from './access-lavel.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  accessLevels: any[] = [];

  constructor(private accessLavelService: AccessLavelService) {}

  ngOnInit(): void {
    this.accessLavelService.getAccessLavel().subscribe(data => {
      this.accessLevels = data;
      console.log('权限数据:', data);
    });
  }
}

关键说明 #

• AngularFireDatabaseModule必须导入，它提供了AngularFireDatabase的依赖注入提供者，缺失会导致NullInjectorError。
• 开发阶段可临时设置Firebase实时数据库规则为{ "rules": { ".read": true, ".write": true } }，生产环境需配置安全规则限制读写权限。

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