"Cannot read property 'addEventListener' of undefined" using InAppBrowser

Ionic Framework ionic-v3
1

I’m using InAppBrowser from ionic-native to open an system browser window and watch for a particular callback URL to be loaded. Here’s a snippet of my code:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { InAppBrowser, InAppBrowserEvent } from 'ionic-native';

@Component({})
export class MyPage {

    /* ... constructor, etc. ... */

    // function triggered by button click on the page
    register() {
        let url = 'https://example.com/oauth2/authorize?client_id=29D20X';
        let browser: InAppBrowser = new InAppBrowser(url, '_system');
        browser.on('loadstart').subscribe((ev: InAppBrowserEvent) => {
            if (0 === ev.url.indexOf('http://localhost:8100/callback')) {
                console.log(ev.url);
                browser.close();
            }
        });
    }
}

As soon as the register() function is triggered, the browser window opens with the expected page, but meanwhile on the page from which it was opened, I get the following error:

TypeError: Cannot read property 'addEventListener' of undefined
    at Observable._subscribe (inappbrowser.js:79)
    at Observable.subscribe (Observable.js:56)

There’s more after that in the stack trace, but it’s pretty clear that the problem is in the ionic-native wrapper for inappbrowser.

Is this a bug, or am I missing something? Here’s my system info, and I’m testing this in a browser using ionic serve.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.8.2
ios-sim version: 5.0.3
OS: OS X Yosemite
Node Version: v7.0.0
Xcode version: Xcode 7.2.1 Build version 7C1002

Thanks!

1 Like
2

In browser’s console you should see a warn
> "Native: ThemeableBrowser is not installed or you are running on a browser. Falling back to window.open, all instance methods will NOT work."
This message appears when calling constructor of ionic-native ThemeableBrowser.
Your code should work for device.

3

@Team_Ginger, Thanks for the reply! I don’t see that warning, however.

I tried testing this in both the iOS and Android emulators, and still no joy.

4

Hmm, just tested this out on android and ios, was not able to cause and error.
I was able to cause an error though when running ionic serve, which makes sense, since there is no cordova.

1 Like
5

Yeah, that makes sense that it wouldn’t work in the browser with ionic serve.

Does cordova exist in the emulator? I’ve tried to get the code to work in both iOS simulator and Android emulator with no luck.

I’ll test on an actual device.

In the meantime, I’m wondering if there’s an alternative strategy for testing, or for performing the underlying task, i.e. calling up an 3rd party authorization page in a browser outside of the app, without using the InAppBrowser…

6

Still having trouble with this. I’ve been testing on an android device using ionic run android on the command line.

Trying to run ionic run android -lc gave me an error:

Application Error: There was a network error (http://10.0.0.116:8100/)

So I’m not actually able to get any debugging info on the console. However, I resorted to just writing some values to the page template itself:

  private messages: string[];
  register() {
    this.messages.push('register clicked');
    this.platform.ready().then(() => {
      this.messages.push('platform ready');
      let url = 'https://example.com/oauth2/authorize?client_id=29D20X';
      let browser: InAppBrowser = new InAppBrowser(url, '_system');
      browser.on('loadstart').subscribe((ev: InAppBrowserEvent) => {
        this.messages.push(ev.url);
        if (0 === ev.url.indexOf('http://localhost:8100')) {
          this.messages.push('loaded: ' + ev.url);
          browser.close();
        }
      });
    }, err => {
      this.messages.push('error: ' + err);
    });
  }

I wrapped the InAppBrowser instance in this.platform.ready().then(...) to make sure the device was ready. I also explicitly added InAppBrowser to config.xml as per this tutorial. These things don’t seem to have helped (or hurt).

I get the messages “register clicked” and “platform ready” and it opens the browser window. However, after that the event handler doesn’t seem to have any reference to the browser window, i.e. I can’t monitor the loadstart event, and I certainly don’t seem to be able to close the external browser from my code.

Any ideas why this might be? Very frustrating.

7

Figured it out!!!

The problem was in the parameters being passed to the new InAppBrowser() function.

This works:

let browser = new InAppBrowser(url, '_blank', 'location=yes');

This does NOT work:

let browser = new InAppBrowser(url, '_system');

I was following this documentation and it was after a lot of googling and reading through random threads about inappbrowser that I finally found the solution. Essentially, both of these will open a browser window. However, the incorrect method will not allow you to attach an event listener to any of the browser events, e.g. loadstart.

1 Like