title: How to solve rxjs Typescript error (Ionic 3, angularfire2)
body: <p>I have reappearing errors when I try to serve my ionic 3 application using angularfire2.</p>
  
  <p>These are the errors: </p>
  
  <blockquote>
    <p>Typescript Error ';' expected.
    C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts</p>
    
    <p>export declare type ObservedValueOf = O extends
    ObservableInput ? T : never;</p>
    
    <p>Typescript Error Expression expected.
    C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts</p>
    
    <p>export declare type ObservedValueOf = O extends
    ObservableInput ? T : never;</p>
    
    <p>Typescript Error 'ObservableInput' only refers to a type, but is being
    used as a value here.
    C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts</p>
    
    <p>Typescript Error Cannot find name 'infer'.
    C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts</p>
  </blockquote>
  
  <p>and many more all relating to rxjs. I am using it for example like this:</p>
  
  <pre><code>import { Note } from '../../model/note/note.model';
  import { AngularFireDatabase } from 'angularfire2/database';
  import { map } from 'rxjs/operators';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'page-aufgaben',
    templateUrl: 'aufgaben.html'
  })
  export class AufgabenPage {
  
  
    aufgaben: Observable&lt;Note[]&gt;;
  
    constructor(public navCtrl: NavController, private modal: ModalController, public events: Events, private db: AngularFireDatabase) {
  
        this.aufgaben = this.db.list('/aufgabenverzeichnis/').snapshotChanges().pipe(
       map(changes =&gt;
         changes.map(c =&gt; ({ key: c.payload.key, ...c.payload.val() }))
       )
     );
    }
  </code></pre>
  
  <p>this is my package.json: </p>
  
  <pre><code>{
    "name": "Verein",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
      "start": "ionic-app-scripts serve",
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint"
    },
    "dependencies": {
      "@angular/animations": "5.2.11",
      "@angular/common": "5.2.11",
      "@angular/compiler": "5.2.11",
      "@angular/compiler-cli": "5.2.11",
      "@angular/core": "5.2.11",
      "@angular/forms": "5.2.11",
      "@angular/http": "5.2.11",
      "@angular/platform-browser": "5.2.11",
      "@angular/platform-browser-dynamic": "5.2.11",
      "@ionic-native/core": "~4.18.0",
      "@ionic-native/splash-screen": "~4.18.0",
      "@ionic-native/status-bar": "~4.18.0",
      "@ionic/storage": "2.2.0",
      "@reactivex/rxjs": "^5.5.3",
      "angularfire2": "^5.1.1",
      "firebase": "^5.8.4",
      "ionic-angular": "3.9.3",
      "ionicons": "3.0.0",
      "promise-polyfill": "^8.1.0",
      "rxjs": "^6.4.0",
      "rxjs-compat": "^6.4.0",
      "sw-toolbox": "3.6.0",
      "zone.js": "0.8.29"
    },
    "devDependencies": {
      "@ionic/app-scripts": "3.2.1",
      "@ionic/lab": "1.0.20",
      "typescript": "^2.6.2"
    },
    "description": "An Ionic project"
  }
  </code></pre>
  
  <p>I know it has something to do with the different versions but I read that installing rxjs compat should solve the problem. Problem is it never did. When I save parts of my project without changing anything in my IDE it works again after the lab page reloads, which is even weirder. So I really don't know what to do anymore. Please help. </p>
  
  <p><strong>EDIT: After following the advise below and upgrading to typscript 2.7.2 and rxjs/rxjs-compat to 6.3.3 the errors above disappered but I am getting a bunch of new once which too disappear after randomly saving the project in my IDE but come back again if I ionic serve --lab anew. These are the new errors:</strong></p>
  
  <p>I managed to get rid of a few of them (they were all syntax related) but there is one Type I can't get rid of because I don't know how to change the syntax. All erros left are like this:</p>
  
  <p>Typescript Error
  Type 'Observable&lt;{ key: string; }[]>' is not assignable to type Observable&lt;(Note[])>. Type '{ key: string; }[]' is not assignable to type 'Note[]'. Type '{ key: string; }' is not assignable to type 'Note'. Property 'titel' is missing in type '{ key: string; }'.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { ModalController } from 'ionic-angular';
  import { Events } from 'ionic-angular';
  import { Note } from '../../model/note/note.model';
  import { AngularFireDatabase } from 'angularfire2/database';
  import { map } from 'rxjs/operators';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'page-aufgaben',
    templateUrl: 'aufgaben.html'
  })
  export class AufgabenPage {
  
    public color: string = 'primary';
    public color2: string ='primary';
    aufgaben: Observable&lt;Note[]&gt;;
  
    constructor(public navCtrl: NavController, private modal: ModalController, public events: Events, private db: AngularFireDatabase) {
  
  /*error points to this.aufgaben*/ this.aufgaben = this.db.list('/aufgabenverzeichnis/').snapshotChanges().pipe(
           map(changes =&gt;
             changes.map(c =&gt; ({ key: c.payload.key, ...c.payload.val() }))
           )
         );
        }
  </code></pre>
  
  <p>Note.model.ts: </p>
  
  <pre><code> export interface Note {
    titel: string;
    beschreibung: string;
  }
  </code></pre>
  
  <p>This error occurs multiple times in different ts files so I only listed one example. All of them disappear after saving and reappear after opening the app anew without me making any changes. So I really don't know how to fix this. Are those syntax errors related to the new typscript version?</p>
  
  <p><strong>EDIT: I was able to resolve the issue by changing "<code>aufgaben: Observable&lt;Note[]&gt;</code>" to "<code>aufgaben: Observable&lt;any[]&gt;</code>.</strong> Thanks for the help :).</p>