Ionic-native: bug(rxjs): incompatible types

[AmitMY]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
Running ionic serve gives the following error: (you can see the error originates from ionic-native's rxjs)

Expected behavior:

No error

Steps to reproduce:
No Idea

package.json info:

"dependencies": {
    "@agm/core": "^1.0.0-beta.1",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@ionic-native/core": "^4.3.2",
    "@ionic-native/date-picker": "^4.3.2",
    "@ionic-native/facebook": "^4.3.2",
    "@ionic-native/geolocation": "^4.3.2",
    "@ionic-native/globalization": "^4.3.2",
    "@ionic-native/google-analytics": "^4.3.2",
    "@ionic-native/google-maps": "^4.3.2",
    "@ionic-native/native-geocoder": "^4.3.2",
    "@ionic-native/splash-screen": "^4.3.2",
    "@ionic-native/status-bar": "^4.3.2",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@ngui/auto-complete": "^0.16.0",
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "angular2-google-maps": "^0.17.0",
    "angularfire2": "4.0.0-rc0",
    "cordova-android": "^6.3.0",
    "cordova-browser": "^5.0.1",
    "cordova-ios": "^4.5.2",
    "cordova-plugin-add-swift-support": "^1.7.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-facebook4": "^1.9.1",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-globalization": "^1.0.7",
    "cordova-plugin-google-analytics": "~1.8.3",
    "cordova-plugin-googlemaps": "^2.0.11",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
    "cordova-plugin-nativegeocoder": "^2.0.4",
    "cordova-plugin-recentscontrol": "^1.1.0",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "firebase": "4.3.1",
    "geofire": "^4.1.2",
    "ionic-angular": "^3.7.1",
    "ionic-plugin-deploy": "^0.6.7",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "markdown": "^0.5.0",
    "md5": "^2.2.1",
    "moment": "^2.19.1",
    "ng2-lazy-trumbowyg": "^2.4.2",
    "rxjs": "^5.5.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.18"
},

[AmitMY]

Find out why!
I used typescript: ~2.5.0 instead of ~2.3.4

I'm leaving this open because this has to be fixed when ionic uses angular 5

[emcniece]

Pasting error in text form for better searchability in these issues:

[12:41:23]  typescript: node_modules/ionic-native/node_modules/rxjs/Subject.d.ts, line: 16
            Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are
            incompatible. Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator:
            Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T'
            is not assignable to type 'R'.

      L16:  export declare class Subject<T> extends Observable<T> implements ISubscription {
      L17:      observers: Observer<T>[];

[12:41:23]  typescript: node_modules/ionic-native/node_modules/rxjs/observable/dom/WebSocketSubject.d.ts, line: 23
            Class 'WebSocketSubject<T>' incorrectly extends base class 'AnonymousSubject<T>'. Types of property 'lift'
            are incompatible. Type '<R>(operator: Operator<T, R>) => WebSocketSubject<R>' is not assignable to type
            '<R>(operator: Operator<T, R>) => Observable<T>'. Type 'WebSocketSubject<R>' is not assignable to type
            'Observable<T>'. Types of property 'operator' are incompatible. Type 'Operator<any, R>' is not assignable to
            type 'Operator<any, T>'. Type 'R' is not assignable to type 'T'.

      L23:  export declare class WebSocketSubject<T> extends AnonymousSubject<T> {
      L24:      url: string;

This is a bigger problem now that https://github.com/ionic-team/ionic/releases/tag/v3.9.0 has dropped - 3.9.0 introduces rxjs 5.5.2 and Angular5!

[emcniece]

This will (very hopefully) be resolved by https://github.com/ionic-team/ionic-native/pull/2089

[emcniece]

@AmitMY can you share the results of an npm ls rxjs from your app directory? I am curious if this problem is caused by having multiple rxjs versions in various packages.

I see that ionic-native is already using rxjs 5.5.2, yet my repo shows the same errors. Here's my npm ls rxjs output:

✗ npm ls rxjs
[email protected] /Users/emcniece/Code/ionic/aurora-app
├─┬ [email protected] -> /Users/emcniece/Code/nodejs/aurorajs
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

[mlynch]

cc @danbucholtz any thoughts on the above? See #2089 for a PR to update deps

[emcniece]

Aha... figured it out. We have a deprecated version of ionic-native installed!

We no longer need the ionic-native module - we just need @ionic-native/core.

Running npm uninstall ionic-native --save builds successfully.

[emcniece]

@AmitMY your shared package.json doesn't explicitly list ionic-native as an included package, but the paths in your screenshot indicate that this module is present in your system. Try running the uninstall command above.

[alexmgrant]

The issue for me was that I was using @ionic/cloud-angular, which is now deprecated in favour of Ionic Pro. An outdated version of ionic-native is a dependency of @ionic/cloud-angular.

[hellios123]

//lift<T>(operator: Operator<T,R>): Observable<T>;

worked for me

[mateosantosdev]

Thanks @hellios123 !

[FloryanFilip]

@hellios123 Indeed, commething this line helped me. But I cannot grasp the underlying problem that is causing this bug. commenting a line of code should not be a way of fixing things

[RomuloVHSYS]

@hellios123 Thanks!
I agree with @FloryanFilip