离子3项目中的angularfire2和firebase更新

Question

我在我的离子项目中更新了angularfire2和firebase。在那之前，一切都正常工作，但是现在，当我运行离子服务时，我会遇到这个错误。

类型记录错误:文件‘/node_/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

这将在项目的angularfire2文件中添加angularfire2、允诺填充和firebase条目作为依赖项。类似于：

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

Setup @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 {}

### Inject AngularFire and Bind it to List

Now inject AngularFireDatabase in your component. Open your `home.ts` by going into `src/pages/home/home.ts` and make the  following changes:

>  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.
>  

Your `home.ts` file should look like this:

```javascript

从“@角/核心”导入{ Component }；

从“离子角”导入{ NavController }；

从“angularfire2 2/数据库”导入{ AngularFireDatabase }；

从‘rxjs/可观’导入{可观}；

@组件({

选择者：“主页”，

templateUrl：'home.html‘

})

导出类HomePage {

项目: Observable；

构造函数(public navCtrl: NavController，afDB: AngularFireDatabase) {

this.items = afDB.list('cuisines').valueChanges();

}

}

\*_Ensure you've_ _`cuisines`_ _node in your database with some primitive data._

**Update** your `home.html` at `src/pages/home/home.html`, with following entry

```javascript

<ion-navbar>

    <ion-title>

        Ionic Blank

    </ion-title>

</ion-navbar>

<ion-list>

    <ion-item class="text" *ngFor="let item of items | async">

        {{item | json}}

    </ion-item>

</ion-list>

**Run your app by executing the following command**

```javascript

C：\项目\auth-Ng4-离子3-af2>离子服务

This should fetch the data from firebase.

Source: [https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md](https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md)

**EDIT:** If this doesn't work, you may need to downgrade firebase. In this case, run the following command: 

```javascript

npm安装--保存firebase@3.9.*