I am getting error using Firebase with Angular

Question

I am trying to import FirebaseListObservable from angularfire2/database

import { FirebaseListObservable } from 'angularfire2/database';

where I am getting error

[ts] Module '"/Users/user/Projects/Angular/Old/A4/chat-app/node_modules/angularfire2/database/index"'

has no exported member 'FirebaseListObservable'.

I am putting full details of pakage.json file of my Application

{
  "name": "chat-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular-firebase": "^1.1.4",
    "angularfire2": "^5.0.2",
    "core-js": "^2.5.4",
    "firebase": "^5.5.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.2.4",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

I am importing FirebaseListObservable to my service file . I am also putting details of the service file

chat.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';

import { ChatMessage } from '../models/chat-message.model';

@Injectable()
export class ChatService {

  user: firebase.User;
  chatMessages: FirebaseListObservable<ChatMessage[]>;
  chatMessage: ChatMessage;
  userName: Observable<string>;

  constructor( private db: AngularFireDatabase , private afAuth: AngularFireAuth ) { }

getUser() {
  const userId = this.user.uid;
  const path = `/users/${userId}`;
  return this.db.object(path);
}

  sendMessage(msg: string) {
    const timestamp = this.getTimeStamp();
    const email =  'biky700@gmail.com';
    this.chatMessages = this.getMessages();
    this.chatMessages.push({
      message: msg,
      timeSent: timestamp,
      userName:  'Anurag Ranjan',
      email: email });
  }

  getMessages(): FirebaseListObservable<ChatMessage[]> {
    // query to create our message feed binding
    return this.db.list('messages', {
      query: {
        limitToLast: 25,
        orderByKey:  true
      }
    });
  }

  getTimeStamp() {
    const now = new Date();
    const date = now.getUTCFullYear() + '/' +
                 (now.getUTCMonth() + 1) + '/' +
                 now.getUTCDate();
    const time = now.getUTCHours() + ':' +
                 now.getUTCMinutes() + ':' +
                 now.getUTCSeconds();

    return (date + ' ' + time);
  }



 }
}

I am also getting two other errors in my above mentioned chat.service.ts code

first error

ERROR in src/app/services/chat.service.ts(63,1): error TS1128: Declaration or statement expected.

second error

In the chat.service.ts file some code -:

getMessages(): FirebaseListObservable<ChatMessage[]> {
    // query to create our message feed binding
    return this.db.list('messages', {
      query: {
        limitToLast: 25,
        orderByKey:  true
      }
    });
  }

some code given below comes with red line and When I hover over them message shown

Argument of type '{ query: { limitToLast: number; orderByKey: boolean; }; }' is not assignable to parameter of type 'QueryFn'. Object literal may only specify known properties, and 'query' does not exist in type 'QueryFn'.

query: {
            limitToLast: 25,
            orderByKey:  true
          }

error 3

problem in importing FirebaseListObservable which I have mentioned at the top

Answer 1

As of AngularFire 2.x and above FirebaseObjectObservable are now called AngularFireObject.

Example:

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';