InAppBrowser Events+Communication

Ionic Native
1

Using ionic-angular 3.0.1 and @ionic-native/in-app-browser 3.5.0
I can open a InAppBrwoser, but when I try to an event, I get the error
ERROR TypeError: Invalid event target
According to the Cordova doc, “exit” is a valid event, but there is no mention in the Ionic doc.
I tried other events, with the same result.

    const win: InAppBrowserObject = this.iab.create(url, target, options);
    win.on("exit").subscribe((event: InAppBrowserEvent) => { ... });

Any suggestions?

Also what is the best way to get data from that browser (Android, iOS, Browser) back to the apps ??

Thanks!

2

I’m having the same trouble, this is some of my package.json

"dependencies": {
    "@angular/core": "4.0.2",
    "@ionic-native/core": "^3.6.0",
    "@ionic-native/in-app-browser": "^3.6.0",
    "ionic-angular": "3.1.1",
    ...
  }

This is my code:

let browser = this.inAppBrowser.create('template.html', '_blank', 'location=no');
browser.on('loadstart').subscribe(event => {
    console.log("loadstart -->",event);
}, err => {
    console.log("InAppBrowser loadstart Event Error: " + err);
});

And exactly than @jorgjanke mention, my template.html open, but got an error TypeError: Invalid event target on the Observable

3

Same problem here. InAppBrowser can open, but trying to catch an event throws the error. Have been struggling with this for days!

The error says very little about the problem, so I have no idea how to solve this. I’ve been updating ionic/plugins to latest versions but still no luck. Also a new project with a single page and only the inappbrowser plugin throws the same error.

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(type => {
        console.log(type);
      });
    });
  }
}

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"
}
4

Ok, @bash88 created a new topic for this where we continue to tackle this problem (As in e.g. implementing the Cordova plugin directly to see if the problem is with Ionic Native or the plugin itself):

To consolidate I will now close this thread - if you want to help resolve this, please post to this new topic.