Is Ionic 3 compatible with RxJS 6 and Angular 6?

I’m on ionic-angular 3.9.2, all of my @ionic-native packages are on ^4.0.0 versions, and I have been upgrading my app to RxJS 6 alongside rxjs-compat . After making what I thought were the necessary changes, I removed rxjs-compat and began seeing a ton of breaking TypeScript errors stemming from various Ionic packages. Some examples:

[16:41:06]  typescript: node_modules/ionic-angular/components/tabs/tabs.d.ts, line: 2 
            Module '"project/node_modules/rxjs/Subject"' has no exported 
            member 'Subject'. 
       L1:  import { AfterViewInit, ElementRef, EventEmitter, Renderer, ViewContainerRef } from '@angular/core';
       L2:  import { Subject } from 'rxjs/Subject';
       L3:  import 'rxjs/add/operator/takeUntil';
[16:41:06]  typescript: node_modules/@ionic-native/push/index.d.ts, line: 2 
            Module '"project/node_modules/rxjs/Observable"' has no exported member 'Observable'. 
       L1:  import { IonicNativePlugin } from '@ionic-native/core';
       L2:  import { Observable } from 'rxjs/Observable';
       L3:  export declare type EventResponse = RegistrationEventResponse & NotificationEventResponse & Error;
[16:41:06]  typescript: node_modules/@ionic-native/core/plugin.d.ts, line: 1 
            Module '"project/node_modules/rxjs/Observable"' has no exported member 'Observable'. 
       L1:  import { Observable } from 'rxjs/Observable';
       L2:  import { CordovaOptions } from './decorators';

So is Ionic 3 and IonicNative 4 not compatible with RxJS 6 and Angular 6?

I’m also having some trouble understanding the version dependencies between Ionic, Ionic Native, Angular, and RxJS

It seems to me that the only way to get rid of these warnings would be to update all my Ionic Native versions to versions that use the correct RXJS reference. However, this would still leave the Ionic Angular error, implying that I did to upgrade to Ionic Angular 4 (which isn’t super feasible since it seems like a large migration)

Current dependencies if it helps:

  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/flex-layout": "^7.0.0-beta.23",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@ionic-native/app-version": "4.7.0",
    "@ionic-native/badge": "^4.20.0",
    "@ionic-native/base64": "^4.7.0",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/core": "^4.9.2",
    "@ionic-native/device": "^4.20.0",
    "@ionic-native/document-viewer": "^4.7.0",
    "@ionic-native/file": "^4.9.2",
    "@ionic-native/file-opener": "^4.9.2",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/ionic-webview": "^5.14.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/network": "^4.11.0",
    "@ionic-native/pro": "^4.9.2",
    "@ionic-native/push": "^4.19.0",
    "@ionic-native/safari-view-controller": "^4.11.0",
    "@ionic-native/secure-storage": "^4.7.0",
    "@ionic-native/splash-screen": "^4.7.0",
    "@ionic-native/status-bar": "^4.7.0",
    "@ionic-native/unique-device-id": "4.7.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "^2.2.0",
    "body-parser": "^1.18.2",
    "connect-wwwhisper": "*",
    "cordova-browser": "5.0.3",
    "cordova-ios": "^5.1.1",
    "cordova-plugin-add-swift-support": "^1.7.0",
    "cordova-plugin-app-version": "0.1.9",
    "cordova-plugin-camera": "4.1.0",
    "cordova-plugin-device": "2.0.3",
    "cordova-plugin-device-name": "1.3.5",
    "cordova-plugin-document-viewer": "1.0.0",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-inappbrowser": "4.0.0",
    "cordova-plugin-ionic": "5.4.7",
    "cordova-plugin-ionic-webview": "5.0.0",
    "cordova-plugin-safariviewcontroller": "1.6.0",
    "cordova-plugin-secure-storage": "3.0.1",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "1.3.4",
    "cordova-sqlite-storage": "3.3.0",
    "cors": "^2.8.4",
    "express": "^4.16.2",
    "express-basic-auth": "^1.1.4",
    "heroku-ssl-redirect": "0.0.4",
    "ionic-angular": "^3.9.2",
    "ionic-tooltips": "3.1.0",
    "ionic2-auto-complete": "^1.6.2-alpha",
    "ionic2-super-tabs": "^4.1.4",
    "ionicons": "3.0.0",
    "json-loader": "^0.5.7",
    "jssha": "^2.3.1",
    "lodash": "^4.17.20",
    "logrocket": "^1.0.0",
    "moment": "^2.21.0",
    "moment-timezone": "^0.5.14",
    "morgan": "^1.9.0",
    "node-sass": "^4.14.1",
    "phonegap-plugin-push": "2.3.0",
    "reflect-metadata": "^0.1.10",
    "rollbar": "^2.19.3",
    "rxjs": "6.2.2",
    "rxjs-compat": "6.2.2",
    "suncalc": "^1.8.0",
    "sw-toolbox": "3.6.0",
    "uglify-js": "^3.3.13",
    "webpack-merge": "^4.1.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.3",
    "@types/bluebird": "^3.5.32",
    "@types/jssha": "0.0.29",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.4",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.2",
    "immutable": "^3.7.6",
    "prettier": "^2.0.2",
    "tslint": "^5.7.0",
    "typescript": "2.8.3",
    "ws": "3.3.2"
  },

I don’t speak officially, but I would say “yes, not compatible”. Looking at the most recent ionic-angular starter, I see Angular 5, RxJS 5, and TypeScript 2.6.

The aforementioned starter repository and various changelogs are my source of information here, but I would say:

Ionic Framework v3 = “ionic-angular”:
Angular 5, RxJS 5, Ionic Native 4, TypeScript 2.6

Ionic Framework v4 = obsoleted by Ionic Framework v5, should not be used any more

Ionic Framework v5 = “angular”, current as of time of writing:
Angular 7.1+, RxJS 6, Ionic Native 5, TypeScript 3.1+

There is a comment in the Ionic Native 5.0b22 changelog noting that Angular 7.1 / TS 3.1 is mandated, so I don’t think Ionic Native 5 can handle anything earlier than that.

Basically, my rule of thumb is that if I’m not on the current major version of the framework, I should not attempt any major version upgrades to major dependencies that were released after it.

Ah, thank you very much for the explanation, that helps straighten things out a lot.

It seemed like upgrading to RxJS 6 first was part of the upgrade plan to get to Ionic Angular 5, so it’s been difficult sorting out which updates need to happen first, which updates are associated with version, and whether or not the errors that occur during the upgrade process are due to package incompatibilities or improper upgrade code.

Here’s how I always do it:

  • spawn a completely new project with the latest supported version of ionic-framework
  • make sure it builds and runs “hello world”
  • commit to VCS
  • now move everything in package.json to latest versions of major dependencies (angular, rxjs, ionic-native, ts, &c)
  • again make sure “hello world” works, and downgrade/revert until we have the most up-to-date versions of stuff that will build and run
  • now mix in stuff from my old project’s package.json, with their latest versions, taking the opportunity to clean out cruft (like, in your case, dumping @angular/flex-layout and switching moment out for date-fns)
  • keep testing “hello world”
  • now parachute my old app/src sources into the new project, taking the opportunity to rethink how the files are organized, because I usually change my mind on this as the app grows
  • fix that until it builds and runs
1 Like