How to solve rxjs Typescript error (Ionic 3, angularfire2)

Question

I have reappearing errors when I try to serve my ionic 3 application using angularfire2.

These are the errors:

Typescript Error ';' expected. C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts

export declare type ObservedValueOf = O extends ObservableInput ? T : never;

Typescript Error Expression expected. C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts

export declare type ObservedValueOf = O extends ObservableInput ? T : never;

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

Typescript Error Cannot find name 'infer'. C:/Users/Admin/Verein/node_modules/rxjs/internal/types.d.ts

and many more all relating to rxjs. I am using it for example like this:

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<Note[]>;

  constructor(public navCtrl: NavController, private modal: ModalController, public events: Events, private db: AngularFireDatabase) {

      this.aufgaben = this.db.list('/aufgabenverzeichnis/').snapshotChanges().pipe(
     map(changes =>
       changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
     )
   );
  }

this is my package.json:

{
  "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"
}

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.

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:

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:

Typescript Error Type 'Observable<{ key: string; }[]>' is not assignable to type Observable<(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; }'.

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<Note[]>;

  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 =>
           changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
         )
       );
      }

Note.model.ts:

 export interface Note {
  titel: string;
  beschreibung: string;
}

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?

EDIT: I was able to resolve the issue by changing "aufgaben: Observable<Note[]>" to "aufgaben: Observable<any[]>. Thanks for the help :).

Answer 1

These issues are related with rxjs and Typescript. With rxjs new version(6.4.0), the minimum supported version of TypeScript is 2.8. But in your case TypeScript version is 2.6.2. That is the reason for this issue. To solve this issue, upgrade TypeScript to 2.8 or downgrade rxjs and rxjs-compat to miner version which compatible with Typescript 2.6.2.

In my case I downgraded rxjs and rxjs-compat to 6.3.3 version(My Typescript version was 2.7.2).

Find more information here