Styjun

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...

Edit : I think that I could find a solution.
I had a conflict with rxjs imports in my project.
During the troubleshooting, I find 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)