模块导入的意外值请添加@ngmodule注释 [英] Unexpected value imported by the module please add a @ngmodule annotation

问题描述

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

意外值由模块导入请添加@ngmodule注释

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

app.module.ts

 从'@ angular / platform-b​​rowser'导入{BrowserModule};来自'@ angular / http'的
 import {HttpModule};来自'@ angular / core'的
 import {ErrorHandler，NgModule};来自'ionic-angular'的
 import {IonicApp，IonicErrorHandler，IonicModule};来自'@ ionic-native / splash-screen'的
 import {SplashScreen};来自'@ ionic-native / status-bar'的
 import {StatusBar}; $。b 
 $ b从'./app.component'导入{MyApp};来自'../pages/home/home'的
 import {HomePage};来自'angularfire2'的
 
 import {AngularFireModule}; 
 //从'angularfire2 / src / angularfire2'导入{AngularFireModule}; 
从'angularfire2 / database'导入{AngularFireDatabase，AngularFireDatabaseModule，FirebaseListObservable}; 
 
 @NgModule（{
声明：[
 MyApp，
主页
 
]，
进口：[
 BrowserModule，
 HttpModule，
 IonicModule.forRoot（MyApp），
 AngularFireModule，
 AngularFireDatabase，
 // AngularFireDatabaseModule，
 FirebaseListObservable 
 
]，
 bootstrap：[IonicApp]，
 entryComponents：[
 MyApp，
 HomePage 
]，
提供商：[
 StatusBar，
 SplashScreen，
 {提供：ErrorHandler，useClass：IonicErrorHandler} 
] 
}）
导出类AppModule {} 
  

home.ts

 从'@ angular / core'导入{Component};来自'ionic-angular'的
 import {NavController，ModalController，Platform}; 
从'angularfire2 / database'导入{AngularFireDatabase，AngularFireDatabaseModule，FirebaseListObservable}; 
 import'rxjs / add / operator / map'; 
 import *作为'firebase'的firebase; 
 
 @Component（{
 selector：'page-home'，
 templateUrl：'home.html'
}）
 export class HomePage {
 
公共电影：FirebaseListObservable< any []> ;; 
构造函数（public navCtrl：NavController，private angFire：AngularFireDatabase，private modalCtrl：ModalController，private platform：Platform）{
 
} 
 ionViewDidLoad（）
 {
 this.platform.ready（）
 .then（（）=> 
 {
 this.movi​​es = this.angFire.list（'/ films'）; 
 }）; 
} 
 addRecord（）
 {
 let modal = this.modalCtrl.create（'Modals'）; 
 modal.present（）; 
} 
 editMovie（电影）
 {
让params = {movie：movie，isEdited：true}，
 modal = this.modalCtrl.create（'Modals' ，params）; 
 
 modal.present（）; 
} 
 deleteMovie（movie：any）
 {
 this.movi​​es.remove（movie）; 
} 
 
} 
  

解决方案

AngularFireDatabase 是提供者，而不是模块。您只需导入 AngularFireDatabaseModule ，而不是 app.module.ts
中的提供商。同时检查
$ b

$ pre> 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>'
};


进口：[
BrowserModule，
HttpModule，
IonicModule.forRoot（MyApp），
AngularFireModule.initializeApp（firebase），
AngularFireDatabaseModule //这一个
]，


并且在app中的provider数组中.module.ts，

 提供者：[
 AngularFireDatabase，
 // ... ... 
] 
  

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

}

解决方案

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,
     //...
 ]

这篇关于模块导入的意外值请添加@ngmodule注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！