模块导入的非预期值请添加@ngmodule注解

Question

我创建了一个 ionic 应用程序，在这个应用程序中，我想将 firebase 与 ionic 应用程序连接起来。但在配置 firebase 和 ionic 应用程序后，我遇到了问题：

模块导入的非预期值请添加@ngmodule注解

我已经通过 firebase 导入了数据库，现在我想获取以及向该数据添加新数据

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
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 { AngularFireModule } from 'angularfire2/src/angularfire2';
import { AngularFireDatabase, AngularFireDatabaseModule,FirebaseListObservable } from 'angularfire2/database';

@NgModule({
  declarations: [
    MyApp,
    HomePage

  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule,
    AngularFireDatabase,
    // AngularFireDatabaseModule,
    FirebaseListObservable

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController, ModalController, Platform } from 'ionic-angular';
import { AngularFireDatabase, AngularFireDatabaseModule, FirebaseListObservable} from 'angularfire2/database';
import 'rxjs/add/operator/map';
import * as firebase from 'firebase';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public movies    : FirebaseListObservable<any[]>;
  constructor(public navCtrl: NavController, private angFire: AngularFireDatabase, private modalCtrl : ModalController,private platform : Platform) {

  }
  ionViewDidLoad()
  {
     this.platform.ready()
     .then(() =>
     {
        this.movies = this.angFire.list('/films');
     });
  }
  addRecord()
  {
     let modal = this.modalCtrl.create('Modals');
     modal.present();
  }
  editMovie(movie)
  {
     let params = { movie: movie, isEdited: true },
         modal  = this.modalCtrl.create('Modals', params);

     modal.present();
  }
  deleteMovie(movie : any)
  {
     this.movies.remove(movie);
  }

}

Answer 1

AngularFireDatabase 是提供者而不是模块。您只需要导入 AngularFireDatabaseModule 而不是 app.module.ts 中的提供程序 还要检查setup docs

export const firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  };


imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebase),
    AngularFireDatabaseModule //this one
  ],

在 app.module.ts 中的 providers 数组中，

 providers: [
     AngularFireDatabase,
     //...
 ]