Ionic 3 TypeError:_rxjs_Observable__.Observable.fromEvent is not a function?

Ionic Framework ionic-v3
1

Hello,
This question is really about Ionic3 with Angular2 and I am trying to implement in my Ionic 3 app. Would appreciate if somebody can please help me resolve with an issue I am facing right now and. I tried to look around by Googl-ing it but didn’t get anything helpful and i stuck this issue in last two days.Any help will be highly appreciated.?

core.js:12301 ERROR Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.fromEvent is not a function
TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.fromEvent is not a function
    at new SuperTabs (super-tabs.js:136)
    at createClass (core.js:18377)
    at createDirectiveInstance (core.js:18246)
    at createViewNodes (core.js:19472)
    at callViewAction (core.js:19788)
    at execComponentViewsAction (core.js:19707)
    at createViewNodes (core.js:19500)
    at createRootView (core.js:19386)
    at Object.createProdRootView [as createRootView] (core.js:19898)
    at ComponentFactory_.create (core.js:17725)
    at new SuperTabs (super-tabs.js:136)
    at createClass (core.js:18377)
    at createDirectiveInstance (core.js:18246)
    at createViewNodes (core.js:19472)
    at callViewAction (core.js:19788)
    at execComponentViewsAction (core.js:19707)
    at createViewNodes (core.js:19500)
    at createRootView (core.js:19386)
    at Object.createProdRootView [as createRootView] (core.js:19898)
    at ComponentFactory_.create (core.js:17725)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:223)
    at NavControllerBase._failed (nav-controller-base.js:216)
    at nav-controller-base.js:263
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:13851)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

Package.json
{
“name”: “demoApp”,
“version”: “0.0.31”,
“author”: “demoApp”,
“homepage”: “http://demoApp.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
“@angular/animations”: “7.0.0”,
“@angular/common”: “7.0.0”,
“@angular/compiler”: “7.0.0”,
“@angular/compiler-cli”: “7.0.0”,
“@angular/core”: “7.0.0”,
“@angular/forms”: “7.0.0”,
“@angular/http”: “7.0.0”,
“@angular/platform-browser”: “7.0.0”,
“@angular/platform-browser-dynamic”: “7.0.0”,
“@ionic-native/android-permissions”: “^4.12.2”,
“@ionic-native/base64”: “^4.12.2”,
“@ionic-native/call-number”: “^4.12.2”,
“@ionic-native/camera”: “^4.12.0”,
“@ionic-native/clipboard”: “^4.15.0”,
“@ionic-native/contacts”: “^4.7.0”,
“@ionic-native/core”: “4.16.0”,
“@ionic-native/device”: “^4.7.0”,
“@ionic-native/firebase”: “^4.15.0”,
“@ionic-native/image-picker”: “^4.12.2”,
“@ionic-native/image-resizer”: “^4.12.2”,
“@ionic-native/ionic-webview”: “^5.0.0-beta.11”,
“@ionic-native/launch-navigator”: “^4.12.2”,
“@ionic-native/network”: “^4.8.0”,
“@ionic-native/photo-viewer”: “^4.15.0”,
“@ionic-native/pro”: “^4.7.0”,
“@ionic-native/social-sharing”: “^4.14.0”,
“@ionic-native/splash-screen”: “4.16.0”,
“@ionic-native/status-bar”: “4.16.0”,
“@ionic/pro”: “^2.0.3”,
“@ionic/storage”: “^2.2.0”,
“@ngx-translate/core”: “^9.1.1”,
“@ngx-translate/http-loader”: “^3.0.1”,
“call-number”: “^1.0.1”,
“com-badrit-base64”: “^0.2.0”,
“com-sarriaroman-photoviewer”: “^1.1.18”,
“cordova-android”: “7.1.1”,
“cordova-clipboard”: “^1.2.1”,
“cordova-ios”: “4.5.5”,
“cordova-plugin-actionsheet”: “^2.3.3”,
“cordova-plugin-android-permissions”: “^1.0.0”,
“cordova-plugin-camera”: “^4.0.3”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-dialogs”: “^2.0.1”,
“cordova-plugin-file”: “^6.0.1”,
“cordova-plugin-file-transfer”: “^1.7.1”,
“cordova-plugin-firebase”: “^2.0.5”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-network-information”: “^2.0.1”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-telerik-imagepicker”: “^2.2.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“cordova-plugin-x-socialsharing”: “^5.4.1”,
“cordova-sqlite-storage”: “^2.4.0”,
“cordova-support-android-plugin”: “^1.0.1”,
“cordova-support-google-services”: “^1.2.1”,
“es6-promise-plugin”: “^4.2.2”,
“firebase”: “^5.3.1”,
“firebaseui”: “^2.7.0”,
“info.protonet.imageresizer”: “^0.1.1”,
“ionic-angular”: “3.9.2”,
“ionic-img-viewer”: “^2.9.0”,
“ionic-select-searchable”: “^2.10.0”,
“ionic2-super-tabs”: “^4.3.0”,
“ionicons”: “4.4.6”,
“mx.ferreyra.callnumber”: “0.0.2”,
“ngx-color-picker”: “^6.7.0”,
“ngx-order-pipe”: “^2.0.1”,
“ngx-progressbar”: “^2.1.1”,
“rxjs”: “^6.3.3”,
“rxjs-compat”: “^6.3.3”,
“sw-toolbox”: “3.6.0”,
“typescript”: “^2.4.2”,
“uk.co.workingedge.phonegap.plugin.launchnavigator”: “^4.2.2”,
“zone.js”: “^0.8.18”
},
“devDependencies”: {
“@ionic/app-scripts”: “3.2.0”,
“typescript”: “~2.4.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-network-information”: {},
“cordova-sqlite-storage”: {},
“cordova-plugin-camera”: {},
“uk.co.workingedge.phonegap.plugin.launchnavigator”: {
“OKHTTP_VERSION”: “3.+”
},
“mx.ferreyra.callnumber”: {},
“info.protonet.imageresizer”: {},
“cordova-plugin-android-permissions”: {},
“cordova-plugin-telerik-imagepicker”: {
“PHOTO_LIBRARY_USAGE_DESCRIPTION”: “Multiple images together in product”
},
“com-badrit-base64”: {},
“call-number”: {},
“cordova-plugin-x-socialsharing”: {},
“cordova-clipboard”: {},
“cordova-plugin-firebase”: {},
“com-sarriaroman-photoviewer”: {}
},
“platforms”: [
“ios”,
“android”
]
}
}

2

package.json might be relevant.

3

sir check my package.json file

4

Yeah, I suspected something like this. It’s a trainwreck. You can’t blindly upgrade Angular and rxjs like this. If you are going to stick with Ionic 3, as indicated by this:

…then you are going to have to completely overhaul this to go back to the versions of Angular and rxjs that Ionic 3 wants.

Your other option is to try using the Ionic 4 beta, which will work with rxjs6. If you do go that route, however, note that, as the error message indicates, fromEvent is no more in rxjs6. You will have to replace it (and fromPromise) with just plain from.

5

sir it is not possible for me update ionic4 any other option to resolve this issue?

6

@RomnEmpire If the problem is only about rxjs, you could include in your package.json:

"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",

(rxjs-compat will allow you to use code that requires rxjs both 5 and 6. The downside is that the whole library is loaded at startup, which might or might not be a problem for you)

The error you showed is about rxjs, so it should solve it, but I don’t know if there will be errors due to Angular 7 (I would recommend Angular 5 to avoid pitfalls due to version conflicts).

7

Sir,i have include above rxjs version in our package.json but after ionic serve same error again issue is not resolve?

8

@RomnEmpire Now I see that you have the rxjs-compat package in your package.json.

You have not specified if your error happens at compile time or at runtime.

It seems that the super tabs plugin needs the fromObservable method, but you haven’t added to the Observable prototype, like:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

You need to add the fromEvent import in your project (you can add in some file that you know is rendered when this method is needed, or create some file to include the imports that you need), and I assume it’s a runtime error, and also one of the reasons to migrate to rxjs6 (the way I specified above use rxjs5 syntax, but it may be required in your project due to the dependencies).

You can see more information at:

9

Sir error is occur at compile time.i read this post but which place we have to import this?

10

Any file that will be loaded when the code that call fromEvent is called. You could import it in AppComponent or AppModule if you are unsure about where to include.