issue(InAppBrowser) Invalid event target

[bash88]

Hi Guys,

I'm having trouble subscribing to the events fired by the InAppBrowser. Opening a url in the browser is working fine, trying to subscribe to an event throws the error. I started a new project with a single page and only the inappbrowser plugin, still throws the same error.

I've been at this for days now. Am I doing something wrong, or is this a bug?

--

Full error

Runtime Error
Uncaught (in promise): TypeError: Invalid event target TypeError: Invalid event target at Function.FromEventObservable.setupSubscription
(localhost:8101/build/main.js:110502:19) at FromEventObservable._subscribe
(localhost:8101/build/main.js:110524:29) at FromEventObservable.Observable._trySubscribe (localhost:8101/build/main.js:18388:25) at FromEventObservable.Observable.subscribe
(localhost:8101/build/main.js:18376:27) at
localhost:8101/build/main.js:55640:49 at t.invoke
(localhost:8101/build/polyfills.js:3:11562) at Object.onInvoke
(localhost:8101/build/main.js:4403:37) at t.invoke
(localhost:8101/build/polyfills.js:3:11502) at n.run
(localhost:8101/build/polyfills.js:3:6468) at http: //localhost:8101/build/polyfills.js:3:3767 at t.invokeTask
(localhost:8101/build/polyfills.js:3:12256) at Object.onInvokeTask
(localhost:8101/build/main.js:4394:37) at t.invokeTask
(localhost:8101/build/polyfills.js:3:12177) at n.runTask
(localhost:8101/build/polyfills.js:3:7153) at a
(localhost:8101/build/polyfills.js:3:2312)

Version info

Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.6
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.9.3

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { InAppBrowser } from '@ionic-native/in-app-browser';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private iab: InAppBrowser, private platform: Platform) {
    platform.ready().then(() => {
      const browser = this.iab.create('https://ionic.io');
      const watch = browser.on('loadstart').subscribe(function(event){
        console.log('loadstart');
      });
    });
  }
}

package.json

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/in-app-browser": "^3.6.1",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.6",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "iabTest: An Ionic project"
}

[bash88]

@ihadeed nobody who can help me with this?

[janpio]

There is now a forum thread where we try to tackle this problem: https://forum.ionicframework.com/t/issue-inappbrowser-invalid-event-target/88548

[ihadeed]

Fixed and will be available in the next release.

[fabiancook]

Hi, I believe the commit breaks the on function, for me it returns a promise now rather than an Observable

Looks like this is because of the InstanceCheck decorator

With @InstanceCheck()

With @InstanceCheck({ observable: true })

[jrmcdona]

Yes the on function for me doesn't work. @fabiancook did you this working?

I get this error:
browser.on(...).subscribe is not a function

import { Component } from '@angular/core';
import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser';

@Component({
    selector: 'login',
    templateUrl: 'login.html'
})


export class LoginPage {
    inAppBrowser: any;
    constructor(private iab: InAppBrowser){

    }

    ionViewDidLoad()
    {
        let inAppBrowserOptions = {
            location: 'no',
        };


        let browser = this.iab.create('https://www.w3schools.com', '_blank', {location: 'no'});
        browser.on("loadstop").subscribe((event) => {
            console.log();
        });
    }
}

[fabiancook]

This has still not been resolved, I was able to correct it by changing my local version of the module

[jrmcdona]

Ok thanks. I got it working by using cordova

declare var cordova: any;

@Component({
    selector: 'login',
    templateUrl: 'login.html'
})


export class LoginPage {
    inAppBrowser: any;
    constructor(private iab: InAppBrowser, private platform: Platform, private navCtrl: NavController) {
        platform.ready().then(() => {
            // If we run this in the browser without this if statement we get an error
            if (typeof cordova !== 'undefined') {
                // Open the InAppBrowser Cordova plugin
                const browser = cordova.InAppBrowser.open('abc.com', '_blank', 'location=no,toolbar=no');
                // Add the event listener to the InAppBrowser instance
                browser.addEventListener('loadstop', (event) => {
                });

                browser.addEventListener('loadstart', (event) => {
                });
            }
        });
    }

[janpio]

As @ihadeed said this has been solved. Unfortunately there hasn't been a release since 21 days, so the change is not available via npm yet.