Cannot read property 'subscribe' of undefined on Ionic 4 , Angular 8

Question

I'm using Ionic 4 and Angular 8 for my project. My project needs to integrate with a payment gateway service. I'm using Ionic 4 InAppBrowser plugin to open payment gateway site.

This is my implementation:

const browserRef = this.browser.create(paymentUrl, '_blank');
this._hookBrowserClosedSubscription = browserRef.on('loadstop').subscribe(event => {
  console.log(event);
});

I use command ionic cordova run android --device --livereload --no-native-run to run my app on a real device. I got the following error when I tried opening a page using InAppBrowser plugin:

Cannot read property 'subscribe' of undefined

I have been searching for this error, mostly they mention about its existence on browser, not real devices.

The packages I'm using:

"cordova-plugin-inappbrowser": "^3.0.0"
"@ionic-native/in-app-browser": "^5.8.0",

Can anyone help me please ?

Thank

Answer 1

Finally,

I found the issue's root cause. I don't know why but in-app-browser appears in my packages.json:

"cordova-plugin-inappbrowser": "^3.0.0"
"@ionic-native/in-app-browser": "^5.8.0",

When I ran my application on my device, using Chrome Inspect, I saw a warning message:

Native: InAppBrowser is not installed or you are running on a browser. Falling back to window.open, all instance methods will NOT work.

I tried to install in-app-browser by using 2 commands:

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

When I ran my app again, the warning message disappeared and the browser worked as my expectation.

What a silly mistake.

Hope this helps someone who has the same situation.