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

我在ionic项目中更新了angularfire2和firebase。在此之前，一切都正常工作，但现在，我在运行ionic serve时出现了这个错误

类型脚本错误：文件“/node\u 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"
}

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

配置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 在您喜爱的编辑器中打开您的项目，并在

src/app

下打开

app.module.ts

文件 并添加以下三个条目

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

*确保数据库中的

cuisines

节点包含一些原始数据

在

src/pages/home/home.html

更新您的

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>

这将从firebase获取数据

资料来源：

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

npm install --save firebase@3.9.*

配置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 在您喜爱的编辑器中打开您的项目，并在

src/app

下打开

app.module.ts

文件 并添加以下三个条目

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

*确保数据库中的

cuisines

节点包含一些原始数据

在

src/pages/home/home.html

更新您的

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>

这将从firebase获取数据

资料来源：

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

npm install --save firebase@3.9.*

---

尝试删除

node\u modules

文件夹并运行

npm install

agiani执行了此操作，但我有相同的错误。尝试删除

node\u modules

文件夹并运行

npm install

agiani执行了此操作，但我有相同的错误。谢谢。它起作用了，但我用这个命令降级了firebase。npm安装--保存firebase@3.9.*让它完全工作。谢谢。它起作用了，但我用这个命令降级了firebase。npm安装--保存firebase@3.9.*使它完全工作。