错误:未捕获错误:模块'AppModule'导入了意外的值'AngularFireDatabase'。请添加一个@NgModule批注

时间:2018-12-02 16:44:25

标签: angular firebase firebase-realtime-database

我正在使用角度6,“ firebase”:“ ^ 5.5.8”,“ @ angular / fire”:“ ^ 5.1.0”。

我想部署我的数据列表,但是此错误出现在浏览器控制台中:

  

未捕获的错误:意外的值“ AngularFireDatabase”由   模块“ AppModule”。请添加@NgModule批注。

          import {BrowserModule} from '@angular/platform-browser';
      import {NgModule} from '@angular/core';
      import {HttpClientModule} from '@angular/common/http';
      import {ChartsModule} from 'ng2-charts';
      import {routing, appRoutingProviders} from './app.routing';
      import {environment} from '../environments/environment';
      import {AngularFirestoreModule} from '@angular/fire/firestore';
      import {AngularFireModule} from '@angular/fire';
      import { tempFirebaseRepo } from './Repository/tempFirebase';
      import { AngularFireDatabase } from '@angular/fire/database';



      //componentes
      import { AppComponent } from './app.component';
      import { HeaderComponent } from './components/header/header.component';
      import { FooterComponent } from './components/footer/footer.component';
      import { SettingsComponent } from './components/settings/settings.component';
      import { MenuComponent } from './components/menu/menu.component';
      import { DataComponent } from './components/menu/data/data.component';
      import { InformeMesComponent } from './components/menu/informe/informe-mes/informe-mes.component';


      @NgModule({
        declarations: [
          AppComponent,
          HeaderComponent,
          FooterComponent,
          SettingsComponent,
          MenuComponent,
          DataComponent,
          InformeMesComponent,
          AngularFireDatabase
        ],
        imports: [
          HttpClientModule,
          BrowserModule,
          ChartsModule,
          routing,
          AngularFirestoreModule,
          AngularFireDatabase,
          AngularFireModule.initializeApp(environment.firebase),

        ],
        providers: [
          appRoutingProviders,
          tempFirebaseRepo
        ],
        bootstrap: [AppComponent]
      })
      export class AppModule { }

2 个答案:

答案 0 :(得分:1)

您需要更改导入,以将 AngularFireDatabase 替换为 AngularFireDatabaseModule

  imports: [
    ...
    AngularFireDatabaseModule 
  ],

并从模块导入中删除AngularFireDatabase:

import { AngularFireDatabaseModule } from "angularfire2/database";

AngularFireDatabase应该仅在组件中导入。

答案 1 :(得分:1)

仅将模块导入AppModule,无需在AppModule中声明firebaseDatabase

import {BrowserModule} from '@angular/platform-browser';
  import {NgModule} from '@angular/core';
  import {HttpClientModule} from '@angular/common/http';
  import {ChartsModule} from 'ng2-charts';
  import {routing, appRoutingProviders} from './app.routing';
  import {environment} from '../environments/environment';
  import {AngularFirestoreModule} from '@angular/fire/firestore';
  import {AngularFireModule} from '@angular/fire';
  import { tempFirebaseRepo } from './Repository/tempFirebase';
  import { AngularFireDatabaseModule } from '@angular/fire/database';

  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      SettingsComponent,
      MenuComponent,
      DataComponent,
      InformeMesComponent
      // Removed
    ],
    imports: [
      HttpClientModule,
      BrowserModule,
      ChartsModule,
      routing,
      AngularFirestoreModule,
      AngularFireDatabaseModule,
      AngularFireModule.initializeApp(environment.firebase),

    ],
    providers: [
      appRoutingProviders,
      tempFirebaseRepo
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }