Angular集成Firebase报错：已初始化但提示未创建firebaseApp

核心问题分析 #

你当前使用的是Angular Fire v7+的模块化API（provideFirebaseApp、provideAuth这类方法），但尝试导入旧版的AngularFireModule会导致新旧API冲突，这就是你导入后出现大量报错的原因。同时，“未创建firebaseApp”的报错大概率是配置或初始化环节的问题，下面给出具体修复步骤：

修复步骤 #

1. 彻底移除AngularFireModule相关代码 #

Angular Fire v7+已废弃AngularFireModule.initializeApp()这种写法，改用provideFirebaseApp，不要同时使用两套API，否则会引发依赖冲突。

2. 验证environment.firebaseConfig的完整性 #

打开environment.ts，确认配置包含所有必填字段，格式如下：

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "你的apiKey",
    authDomain: "你的authDomain",
    projectId: "你的projectId",
    storageBucket: "你的storageBucket",
    messagingSenderId: "你的messagingSenderId",
    appId: "你的appId"
  }
};

确保这些值是从Firebase控制台直接复制的，没有遗漏或拼写错误。

3. 确认初始化顺序（你的代码已正确，可再核对） #

provideFirebaseApp必须排在所有其他Firebase服务（provideAuth、provideFirestore等）的前面，你的app.module.ts中顺序是对的，保持即可：

import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

import { environment } from './environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    RouterModule,
    // 先初始化Firebase App
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    // 再加载其他服务
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
  ],
})
export class AppModule { }

4. 组件/服务中正确使用新API注入服务 #

不要用旧版的AngularFireAuth、AngularFirestore等服务，改用inject函数注入对应的Firebase服务：

import { Component, inject } from '@angular/core';
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `...`
})
export class AppComponent {
  private auth = inject(Auth);
  private firestore = inject(Firestore);
  items$: Observable<any[]>;

  constructor() {
    const itemsCollection = collection(this.firestore, 'items');
    this.items$ = collectionData(itemsCollection);
  }

  login(email: string, password: string) {
    signInWithEmailAndPassword(this.auth, email, password)
      .then(result => console.log(result))
      .catch(error => console.error(error));
  }
}

额外排查点 #

• 检查是否在其他模块中重复初始化了Firebase App，比如懒加载模块中又调用了initializeApp，这会导致冲突。
• 运行npm list @angular/fire firebase确认Angular Fire和Firebase的版本兼容，v7+的Angular Fire需要搭配Firebase v9+。

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