Type 'Observable<>' is missing the following properties from type 'Observable<>': [see below] (error TS2322)

Question

I'm leaning Ionic4 and Angular for an university project (A ToDoList mobile app). I'm trying to get some data from my firestore database with AngularFirestore.collection[...].valueChanges() and to store it in a member variable of my custom service to give it to the component afterwards. But i'm getting both an TS2322 error in Visual Studio Code and in the ionic console.

The error is the following :

Type 'Observable<ToDoList[]>' is missing the following properties from type Observable<ToDoList[]>': buffer, bufferCount, bufferTime, bufferToggle, and 104 more.'

I have followed these two tutorials : -https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/ -https://www.techiediaries.com/ionic-firestore-crud/ I have tried to move all the related code to the component, change my AngularFirestore.collection line, inspired by https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md I have also tried removing the import of AngularFireAuth, and the line this.afAuth.auth.signInAnonymously();

My lists service :

import { Injectable } from '@angular/core';
import {ToDoItem, ToDoList} from '../models/todo-model';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
//import { AngularFireAuth } from '@angular/fire/auth';


@Injectable({
  providedIn: 'root'
})
export class TodoServiceService {
  lists: Observable<ToDoList[]>
  listsCollectionRef: AngularFirestoreCollection<ToDoList>

  constructor(/*public afAuth: AngularFireAuth, */public afs: AngularFirestore) {
    console.log('Hello TodoServiceProvider Provider');
    //this.afAuth.auth.signInAnonymously();
    this.listsCollectionRef = this.afs.collection<ToDoList>('ToDoLists');
    this.lists = this.listsCollectionRef.valueChanges();
  }

  public getLists(): Observable<ToDoList[]> {
    return this.lists;
  }

My model :

export interface ToDoList {
    uuid: string,
    name: string,
    items: ToDoItem[]
}

export interface ToDoItem {
    uuid?: string,
    name: string,
    desc?: string,
    complete: boolean
}

My component :

import { Component } from '@angular/core';
import { TodoServiceService } from '../services/todo-service.service';
import { ToDoList } from '../models/todo-model';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-lists',
  templateUrl: 'lists.page.html',
  styleUrls: ['lists.page.scss']
})

export class ListsPage {
    sequence: Observable<ToDoList[]>;

    constructor(private service: TodoServiceService, 
                private router: Router,
                private alertController: AlertController) {
        this.sequence = this.service.getLists();
    }
}

My package.json

{
  "name": "powerTasks",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.1.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "angularfire2": "^5.1.2",
    "core-js": "^2.5.4",
    "firebase": "^5.9.1",
    "promise-polyfill": "^8.1.0",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.3.0",
    "@ionic/lab": "1.0.20",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

I expect sequence to contain the Observable extracted from the database and actually I cannot compile and I don't know why I am getting this error...

Solution

Edit : I think that I could find a solution. I had a conflict with rxjs imports in my project. During the troubleshooting. I found out that the compiler was trying to compare two rxjs objects from two different versions (and in different directories).

I uninstalled the rxjs and rxjs-compat from my home directory to used then only the ones in the project folder.

To get away with rxjs/Rx, as JB Nizet said, I used only the two following imports :

• import { Observable } from 'rxjs';
• import 'rxjs/add/observable/of';

(Tell me if there is a way to do it better, somehow)

Comments

[Varun Sukheja]

Thanks. In my case I was importing concat from rxjs/operator instead of rxjs