title: Type 'Observable<>' is missing the following properties from type 'Observable<>': [see below] (error TS2322)
body: <p>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.</p>
  
  <p>The error is the following :</p>
  
  <p><code>Type 'Observable&lt;ToDoList[]&gt;' is missing the following properties from type Observable&lt;ToDoList[]&gt;': buffer, bufferCount, bufferTime, bufferToggle, and 104 more.'</code></p>
  
  <p>I have followed these two tutorials :
  -<a href="https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/" rel="noreferrer">https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/</a>
  -<a href="https://www.techiediaries.com/ionic-firestore-crud/" rel="noreferrer">https://www.techiediaries.com/ionic-firestore-crud/</a>
  I have tried to move all the related code to the component, change my AngularFirestore.collection line, inspired by <a href="https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md" rel="noreferrer">https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md</a>
  I have also tried removing the import of AngularFireAuth, and the line this.afAuth.auth.signInAnonymously();</p>
  
  <p>My lists service :</p>
  
  <pre><code>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&lt;ToDoList[]&gt;
    listsCollectionRef: AngularFirestoreCollection&lt;ToDoList&gt;
  
    constructor(/*public afAuth: AngularFireAuth, */public afs: AngularFirestore) {
      console.log('Hello TodoServiceProvider Provider');
      //this.afAuth.auth.signInAnonymously();
      this.listsCollectionRef = this.afs.collection&lt;ToDoList&gt;('ToDoLists');
      this.lists = this.listsCollectionRef.valueChanges();
    }
  
    public getLists(): Observable&lt;ToDoList[]&gt; {
      return this.lists;
    }
  </code></pre>
  
  <p>My model :</p>
  
  <pre><code>export interface ToDoList {
      uuid: string,
      name: string,
      items: ToDoItem[]
  }
  
  export interface ToDoItem {
      uuid?: string,
      name: string,
      desc?: string,
      complete: boolean
  }
  </code></pre>
  
  <p>My component :</p>
  
  <pre><code>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&lt;ToDoList[]&gt;;
  
      constructor(private service: TodoServiceService, 
                  private router: Router,
                  private alertController: AlertController) {
          this.sequence = this.service.getLists();
      }
  }
  </code></pre>
  
  <p>My package.json</p>
  
  <pre><code>{
    "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"
  }
  </code></pre>
  
  <p>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...</p>