如何解决Ionic Angular项目中@angular/fire无AngularFireModule导出的ts2305错误

错误原因 #

你遇到的导入报错是两个因素共同导致的：

• @angular/fire v7+ 版本重构了模块化逻辑，完全废弃了v6及更早版本的AngularFireXxxModule类导入规则
• 项目依赖存在版本冲突：你同时安装了旧版angularfire2 v5、firebase v7和新版@angular/fire v7，版本不匹配进一步触发了导入异常

解决方案（二选一即可） #

方案1：适配@angular/fire v7 新语法 #

无需修改现有业务逻辑的核心功能，只需要调整依赖和模块导入规则即可：

1. 清理旧版本冲突依赖，执行命令：

npm uninstall angularfire2 firebase @angular/fire

2. 安装v7版本匹配的依赖：

npm install firebase @angular/fire

3. 修改app.module.ts的导入和配置代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClientPageModule } from './client/client.module';
import { environment } from '../environments/environment';
// v7新导入规则
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { getDatabase, provideDatabase } from '@angular/fire/database';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ClientPageModule,
    // 替换原有初始化和模块导入
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth()),
    provideStorage(() => getStorage()),
    provideDatabase(() => getDatabase())
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

4. （可选）如果业务代码中原本注入了AngularFireAuth、AngularFireStorage等服务，将对应导入替换为新的服务即可，比如把import { AngularFireAuth } from '@angular/fire/auth'替换为import { Auth } from '@angular/fire/auth'，注入逻辑改为constructor(private auth: Auth)，原有API调用基本不需要修改。

方案2：降级@angular/fire到v6 保留原有代码 #

如果不想调整现有写法，可以直接降级到支持旧导入规则的版本：

1. 清理冲突依赖：

npm uninstall @angular/fire angularfire2 firebase

2. 安装匹配的v6版本依赖：

npm install @angular/fire@6.x firebase@8.x

安装完成后无需修改任何原有代码即可正常运行。

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