Unexpected value imported by the module please add a @ngmodule annotation

问题

I have created an ionic app and in this app I want to connect firebase with the ionic app. but after configuring firebase and ionic app I am having the issue:

Unexpected value imported by the module please add a @ngmodule annotation

I have imported database over firebase and now I want to fetch as well as Add new data to that data

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);
  }

}

回答1:

AngularFireDatabase is a provider and not a module. You need to only import AngularFireDatabaseModule and not the provider in your app.module.ts Also check 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
  ],

And in your providers array in app.module.ts,

 providers: [
     AngularFireDatabase,
     //...
 ]

来源：https://stackoverflow.com/questions/47109411/unexpected-value-imported-by-the-module-please-add-a-ngmodule-annotation

标签

android

angular

ionic3

file-transfer