Angular+Ionic集成Firebase报错：WEBPACK_IMPORTED_MODULE_1_firebase_app.app不是函数

我来帮你搞定这个常见的AngularFire2兼容性问题。先回顾下你的代码和遇到的错误：

你的Firebase Provider代码 #

import { HttpClient } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 

@Injectable() 
export class FirebaseProvider { 
  constructor(public afd: AngularFireDatabase) { } 

  getFoodItems() { 
    return this.afd.list("/foodItems"); 
  } 

  addFood(foodName) { 
    this.afd.list("/foodItems").push(foodName); 
  } 

  removeFood(id) { 
    this.afd.list("/foodItems").remove(id); 
  } 
}

HomePage组件代码 #

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { StepperPage } from '../stepper/stepper'; 
import { AboutUsPage } from '../about-us/about-us'; 
import { FirebaseProvider } from '../../providers/firebase/firebase'; 
import { FirebaseListObservable } from 'angularfire2/database'; 

@Component({ 
  selector: 'page-home', 
  templateUrl: 'home.html' 
}) 
export class HomePage { 
  foodItems: FirebaseListObservable<any[]>; 
  newItem = ''; 

  constructor( 
    public navCtrl: NavController, 
    public firebaseProvider: FirebaseProvider 
  ) { 
    this.foodItems = this.firebaseProvider.getFoodItems(); 
  } 

  addFood() { 
    this.firebaseProvider.addFood(this.newItem); 
  } 

  removeFood(id) { 
    this.firebaseProvider.removeFood(id); 
  } 
}

遇到的错误 #

ERROR Error: Uncaught (in promise): TypeError: WEBPACK_IMPORTED_MODULE_1_firebase_app.app is not a function TypeError: WEBPACK_IMPORTED_MODULE_1_firebase_app.app is not a function

问题原因 #

这个错误90%的概率是AngularFire2和Firebase核心库的版本不兼容导致的。新版本的Firebase调整了app相关的API调用方式，而旧版的AngularFire2还是沿用旧的调用逻辑，就会出现找不到方法的报错。另外，也有可能是你的Firebase初始化配置不完整。

解决方案 #

1. 安装兼容的版本组合

先卸载现有的AngularFire2和Firebase包，再安装经过验证的兼容版本：

npm uninstall angularfire2 firebase --save
npm install angularfire2@5.0.0 firebase@5.0.4 --save

这个版本组合在Ionic + AngularFire2的项目中稳定性很高，能避开很多版本兼容问题。

2. 检查AppModule中的Firebase初始化配置

确保在app.module.ts里正确导入并配置了AngularFire相关模块，尤其是数据库模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// 导入Firebase相关模块
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { FirebaseProvider } from '../providers/firebase/firebase';

// 你的Firebase项目配置（从Firebase控制台获取）
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // 初始化Firebase
    AngularFireModule.initializeApp(firebaseConfig),
    // 导入数据库模块
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    FirebaseProvider
  ]
})
export class AppModule { }

注意：一定要把AngularFireDatabaseModule加入到imports数组中，否则数据库操作会失败。

3. 验证导入路径

确保你的代码中所有Firebase相关的导入路径都是正确的，比如你用的angularfire2/database在这个版本里是正确的，不要随意修改导入路径。

完成以上步骤后，重启你的Ionic项目，这个错误应该就能解决了。

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