模块C：// ..没有“ firebaseObservable”导出的成员错误

Question

im trying to follow an angular/firebase tutorial for my class. (you can find it here https://www.barbarianmeetscoding.com/blog/2017/06/09/from-idea-to-reality-in-under-50-minutes-mostly-with-angular-and-firebase/ ) i have follow it word by word but im getting an error importing the FirebaseListObservable in my component, it says it has no exported member i have consulted all the similar questions but i cant find the solution.

my component is:

import { Component, OnInit } from '@angular/core';
import { Baby } from '../baby';

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { RandomPickerService } from '../random-picker.service';

@Component({
selector: 'app-babies',
templateUrl: './babies.component.html',
styleUrls: ['./babies.component.css']
})
export class BabiesComponent implements OnInit {
babies: FirebaseListObservable<Baby[]>;

constructor(private db: AngularFireDatabase, private randomService: RandomPickerService) { }

ngOnInit() {
this.babies = this.db.list('/babies');
}

// create new baby!
giveBirth() {
// create new baby!
const newBaby = new Baby(this.pickRandomName());
const babies = this.db.list('/babies');
babies.push(newBaby);
}

pickRandomName() {
const names = ['Erik', 'Nicolas', 'Fabian', 'Jaime', 'Anderson', 'Luisa', 'Laura', 'Gustavo', 'Chicuazuque', 'Felipe', 'Juan', 'Jose'];
return this.randomService.pickAtRandom(names);
}

}

My routing-module is this one:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BabiesComponent } from './babies/babies.component'

const routes: Routes = [
{
path: 'babies',
children: [{
    path: '',
    component: BabiesComponent
}],
},
{
  path: '**',
  redirectTo: 'babies'
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

and my app module is this one:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FirebaseApp } from 'angularfire2';
import { AppComponent } from './app.component';
import { BabiesComponent } from './babies/babies.component';
import { AppRoutingModule } from './/app-routing.module';
import { HttpModule, Http } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { RandomPickerService } from './random-picker.service';
// Environment configuration
import { environment } from '../environments/environment';

@NgModule({
declarations: [
AppComponent,
BabiesComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
HttpModule
],
bootstrap: [AppComponent],
providers: [RandomPickerService]
})
export class AppModule { }

Answer 1

It is because with new angularfire2 update, FirebaseListObservable has been deprecated. If you still want to use FirebaseListObservable then change your import package from 'angularfire2/database' to 'angularfire2/database-deprecated' Other wise you can check anguarlfire2 documentation on GitHub to find out how to use their new AngularFireList. https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md