AngularFire报错：未创建Firebase [DEFAULT]应用，请调用initializeApp()

我之前在Angular新项目里也踩过这个一模一样的坑！明明旧项目配置复制过来的，结果一调用createUserWithEmailAndPassword就报错，登录组件显示正常但操作就炸，太气人了。结合我的排查经验，给你几个最可能的解决方向：

1. 确认AppModule里的Firebase初始化写法正确 #

别直接用原生Firebase的initializeApp，要使用Angular Fire封装的初始化方法，而且必须确保初始化代码在所有Firebase相关模块之前导入。

正确的AppModule示例（兼容版写法）：

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

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

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    BrowserModule,
    // 重点：先初始化Firebase App，必须放在其他Firebase模块前面
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule // 认证模块要在初始化之后导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果你的项目用的是Firebase v9+的模块化写法（Angular 16+常用），要这样写：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { environment } from '../environments/environment';

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

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    BrowserModule,
    // 初始化Firebase App
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    // 提供认证服务，必须在初始化之后
    provideAuth(() => getAuth())
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 检查Angular CLI与@angular/fire版本兼容性 #

新项目用的CLI版本可能比旧项目高，如果@angular/fire版本不匹配，会导致初始化异常。比如：

• Angular 16+ 需要 @angular/fire 7.6.0+
• Angular 15 需要 @angular/fire 7.5.x

你可以运行这个命令查看当前版本：

npm list @angular/fire

如果版本不匹配，升级或降级@angular/fire到对应版本即可。

3. 排查懒加载模块的问题 #

如果你的登录组件是在懒加载模块里，要确保懒加载模块里也导入了AngularFireAuthModule（或模块化的provideAuth），并且AppModule已经完成了Firebase App的初始化。懒加载模块不会自动继承AppModule的所有导入，所以得单独加一遍。

4. 清理缓存重新构建 #

有时候Angular CLI的缓存会搞出莫名其妙的问题，试试以下步骤：

• 运行 ng clean 清理CLI缓存
• 删除node_modules和package-lock.json
• 重新运行 npm install
• 启动项目 ng serve --open

最后检查environment配置 #

确保environment.ts里的Firebase配置没有拼写错误，所有字段（apiKey、authDomain、projectId等）都完整，和Firebase控制台里的配置一致。

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