Angular 17集成Firebase失败：初始化报错，provideFirebaseApp未执行

问题概述 #

集成Angular 17项目与Firebase时触发以下错误：

main.ts:5 ERROR Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).

核心现象：

• 在appConfig中配置provideFirebaseApp后，其内部的console.log从未执行
• 新建测试项目通过ng add @angular/fire初始化后问题依旧
• 切换至传统NgModule模式，问题仍未解决

依赖版本 #

"dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "firebase-tools": "^13.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

原配置代码 #

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes),
    importProvidersFrom(provideFirebaseApp(() => {
      console.log('Before initializing Firebase App');
      return initializeApp({
        some options... (copied from firebase- they are correct)
      })
    })), importProvidersFrom(provideFirestore(() => getFirestore()))]
};

解决方案 #

1. 修正独立组件模式下的Firebase配置 #

AngularFire 17为独立组件设计的provideFirebaseApp、provideFirestore等函数返回的是EnvironmentProviders，无需用importProvidersFrom包裹，直接加入providers数组即可：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideFirebaseApp(() => {
      console.log('Before initializing Firebase App');
      return initializeApp({
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
        appId: "YOUR_APP_ID"
      });
    }),
    provideFirestore(() => getFirestore())
  ]
};

2. 组件中正确使用Firestore #

不要直接调用getFirestore()，通过依赖注入获取Firestore实例，确保Firebase App已初始化：

import { Component, OnInit } from '@angular/core';
import { Firestore } from '@angular/fire/firestore';
import { collection, getDocs } from 'firebase/firestore';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private firestore: Firestore) {}

  ngOnInit(): void {
    const dataCollection = collection(this.firestore, 'your-collection-name');
    getDocs(dataCollection).then(snapshot => {
      console.log('Collection data:', snapshot.docs.map(doc => doc.data()));
    });
  }
}

3. 传统NgModule模式的正确配置 #

如果使用NgModule而非独立组件，需导入AngularFireModule和对应子模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

import { AppComponent } from './app.component';
import { firebaseConfig } from './firebase.config';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外注意事项 #

• 移除项目依赖中的firebase-tools（该工具应为全局安装）：

  npm uninstall firebase-tools
  npm install -g firebase-tools
  

• 确保Angular与AngularFire版本匹配（Angular 17对应AngularFire 17.x，当前版本已匹配）
• 确认Firebase配置参数完全复制自Firebase控制台，无拼写错误

内容的提问来源于stack exchange，提问作者Michał Wierzyk