Type 'AngularFireObject<{}>' is not assignable to type 'FirebaseObjectObservable<User>'

Question

I have a big trouble because of this error. I am creating a signup module using Angular4 and angularfire2.

Here is the package.json code.

"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/cdk": "^5.1.0",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@angular/service-worker": "^5.2.1",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
"angular-sortablejs": "^2.5.1",
"angular2-useful-swiper": "^5.0.1",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.0.0-beta",
"core-js": "^2.4.1",
"firebase": "^4.9.0",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"metismenu": "^2.7.0",
"ng2-dnd": "^4.0.0",
"ngx-agile-slider": "^1.0.0-alpha.8",
"ngx-slideshow": "0.0.11",
"npmignore": "^0.2.0",
"pace-js": "^1.0.2",
"perfect-scrollbar": "^0.8.1",
"popper.js": "^1.12.5",
"rxjs": "^5.4.2",
"sortablejs": "^1.7.0",
"swiper": "^4.1.0",
"ts-helpers": "^1.1.2",
"zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.6",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^2.0.48",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "^2.3.4",
    "typings": "^2.1.1"
  }

And here is the service code for firebase database operation.

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';

import { User } from '../model/user';

@Injectable()
export class UserService {

  private dbPath: string = '/users';

  user: FirebaseObjectObservable<User> = null;
  users: FirebaseListObservable<User[]> = null;

  constructor(private db: AngularFireDatabase) {  }

  getUser(key: string): FirebaseObjectObservable<User> {
    this.user = this.db.object(`${this.dbPath}/${key}`);
    return this.user;
  }

  createUser(user: User): void {
    this.users.push(User).catch(error => this.handleError(error));
  }

  updateUser(key: string, value: any): void {
    this.users.update(key, value).catch(error => this.handleError(error));
  }

  deleteUser(key: string): void {
    this.users.remove(key).catch(error => this.handleError(error));
  }

  getUsersList(query = {}): FirebaseListObservable<User[]> {
    this.users = this.db.list(this.dbPath);
    return this.users;
  }

  deleteAll(): void {
    this.users.remove().catch(error => this.handleError(error));
  }

  private handleError(error) {
    console.log(error);
  }
}

As you can see from the package.json file, I am using angular/cli v1.6.6. I am thinking this is because of the version of angularfire2 and angular4.

Answer 1

Using Angular 11

Change

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

To

import { AngularFireList, AngularFireObject } from '@angular/fire/database';

Also change all annotation of

• FirebaseObjectObservable<User> to AngularFireObject<user>
• and FirebaseListObservable<User[]> to AngularFireList<User[]>

Hope this works

Answer 2

there is another way to resolve that by replacing :

  private user$ :FirebaseObjectObservable<User>;

with

  private user$ :AngularFireObject<User>;

Answer 3

Change

From

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

To

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

EDIT

It should be as

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from 'angularfire2/firestore';

and then

@Injectable()
export class UserService {
  usersCollection: AngularFirestoreCollection<Users>
  Users: Observable<Users[]>;

  constructor(public afs: AngularFirestore) { 
    this.Users = this.afs.collection('Users').valueChanges();
  }

  getUsers(){
    return this.Users;
     }

}