ionic 3 项目中的 angularfire2 和 firebase 更新

Question

我在我的 ionic 项目中更新了 angularfire2 和 firebase。在此之前，一切正常，但现在，当我运行 ionic serve.

时出现此错误

Typescript 错误：文件“/node_modules/firebase/app.d.ts”不是模块。我打开文件，发现它是空的。

这是我的 package.json 文件

 "dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@ionic-native/camera": "^3.13.1",
"@ionic-native/core": "3.10.2",
"@ionic-native/image-resizer": "^4.3.0",
"@ionic-native/network": "^4.2.1",
"@ionic-native/splash-screen": "3.10.2",
"@ionic-native/status-bar": "3.10.2",
"@ionic/storage": "2.0.1",
"angularfire2": "^4.0.0-rc0",
"firebase": "^4.6.2",
"ionic-angular": "3.4.2",
"ionicons": "3.0.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"typings": "^2.1.1",
"zone.js": "0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"typescript": "2.3.3"
},
"cordovaPlugins": [
  "cordova-plugin-whitelist",
  "cordova-plugin-console",
  "cordova-plugin-statusbar",
  "cordova-plugin-device",
  "cordova-plugin-splashscreen",
  "ionic-plugin-keyboard"
],
  "cordovaPlatforms": [],
  "description": "loginApp: An Ionic project"
}

那么这个错误的原因可能是什么？

Answer 1

配置 AngularFire 和 Firebase

在您的项目目录中安装所需的包：

$ npm install angularfire2 firebase promise-polyfill --save

这应该在项目的 package.json 文件中添加 angularfire2、promise-polyfill 和 firebase 条目作为依赖项。类似于：

"angularfire2": "^4.0.0-rc.1", "firebase": "^4.1.3", "promise-polyfill": "^6.0.2",

设置@NgModule

在您喜欢的编辑器中打开您的项目并打开 app.module.ts 文件，在 src/app 下并添加以下三个条目。

1) 在顶部导入 AngularFireModule 和 AngularFireDatabaseModule。

2) 定义您的 firebaseConfig 常量。

3) 通过在@NgModule

的 "imports" 数组中添加 AngularFireModule 和 AngularFireAuthModule 来初始化您的应用程序

4) 另外，在@NgModule

的"providers"数组中添加AngularFireDatabase

您的 app.module.ts 文件应如下所示。

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

```

注入 AngularFire 并将其绑定到列表

现在在您的组件中注入 AngularFireDatabase。进入 src/pages/home/home.ts 打开你的 home.ts 并制作以下更改：

1) Import "AngularFireDatabase" at the top of your component.

2) Inject your AngularFireDatabase dependency in the constructor.

3) Call the list method on AngularFireDatabase object.

您的 home.ts 文件应如下所示：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

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

  constructor(public navCtrl: NavController, afDB: AngularFireDatabase) {
    this.items = afDB.list('cuisines').valueChanges();
  }

}

*确保您的数据库中有 cuisines 节点和一些原始数据。

更新您的 home.html 在 src/pages/home/home.html，使用以下条目

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item class="text" *ngFor="let item of items | async">
            {{item | json}}
        </ion-item>
    </ion-list>
</ion-content>

运行您的应用程序通过执行以下命令

C:\projects\auth-ng4-ionic3-af2> ionic serve

这应该从 firebase 获取数据。

来源：https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md

编辑： 如果这不起作用，您可能需要降级 firebase。在这种情况下，运行以下命令：

npm install --save firebase@3.9.*

ionic 3 项目中的 angularfire2 和 firebase 更新

angularfire2 and firebase update in ionic 3 project

firebase

ionic-framework

angularfire2

ionic3

angular

配置 AngularFire 和 Firebase

设置@NgModule

注入 AngularFire 并将其绑定到列表