Question

我在离子项目中更新了angularfire2和firebase。在此之前，一切都正常，但现在，当我运行离子服务时，我得到了这个错误。

打字稿错误：文件'/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）通过在＆＃34; imports＆＃34;中添加AngularFireModule和AngularFireAuthModule来初始化您的应用。 @NgModule中的数组

4）另外，在＆＃34; provider＆＃34;中添加AngularFireDatabase。 @NgModule中的数组

您的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。进入home.ts打开src/pages/home/home.ts即可以下更改：

1）导入＆＃34; AngularFireDatabase＆＃34;在组件的顶部。

2）在构造函数中注入AngularFireDatabase依赖项。

3）调用AngularFireDatabase对象上的list方法。

您的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.*

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

1 个答案:

配置AngularFire和Firebase

设置@NgModule

注入AngularFire并将其绑定到列表