CODEWITHSUNDEEP
angulartypescriptfirebasewebpackangularfire2
Mirza Sisic
Mirza Sisic

Reputation: 2429

AngularFire update breaks the app

I've been following along with the Traversy Media's Angular4 course on Udemy and all went well until I got to the AngularFire2 Setup & Client Service portion of the Client Panel project. Webpack fails to compile stating that: FirebaseListObservable and FirebaseObjectObservable have no exported members.

I saw a few people raising similar issues on GitHub but was unable to figure out how to solve it. Also I've tried the exact code provided by the instructor (this was the last resort, as I'd rather figure it out myself), but that didn't work either. Angularfire2 version is: 4.0.0-rc.1

Error message: Webpack fails to compile

Here is the client.service.ts file:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable} from 'angularfire2/database';
import { Observable } from 'rxjs';
import { Client } from '../models/Client';

@Injectable()
export class ClientService {
  clients: FirebaseListObservable<any[]>;
  client: FirebaseObjectObservable<any>;

  constructor(
    public af:AngularFireDatabase
  ) { 
    this.clients = this.af.list('/clients') as FirebaseListObservable<Client[]>;
  }

  getClients(){
    return this.clients;
  }

  newClient(client:Client){
    this.clients.push(client);
  }

  getClient(id:string){
    this.client = this.af.object('/clients/'+id) as FirebaseObjectObservable<Client>;
    return this.client;
  }

  updateClient(id:string, client:Client){
    return this.clients.update(id, client);
  }

  deleteClient(id:string){
    return this.clients.remove(id);
  }

}

This is the only file that shows errors in VS Code linter: No exported member error

Thanks in advance for any helpful insights.

Upvotes: 0

Views: 240

Answers (1)

Orlandster
Orlandster

Reputation: 4858

Over the past few versions, there were 3 different ways to import your database observables.

version < 4.0:

import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from "angularfire2";

version > 4.0:

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from "angularfire2/database";

version > 5.0:

Since 5.0 you can use normal observables instead or import it from the deprecated directory like this:

import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from "angularfire2/database-deprecated";

I would recommend you to upgrade your version from rc to 4.0 or something.

Upvotes: 1

Related Questions