TypeError: Cannot read property 'addEventListener' on undefined InAppBrowser


#1

I trying to open in my app remote address using cordova pluguin InAppBrowser. I use that code:

    import { Injectable } from "@angular/core";
    import { HttpQueryService } from "./httpqueryservice";
    import { ToastController } from "ionic-angular";
    import { InAppBrowser, InAppBrowserEvent } from "ionic-native";

    /**
     * Класс сервиса для открытия окон в браузере
     */
    @Injectable()
    export class WindowOpenService {

      inAppBrowserRef: InAppBrowser; //объект с браузером

      /**
       * Конструктор класса
       */
      constructor(
        public toastCtrl: ToastController,
        public httpQueryService: HttpQueryService
      ){

      }

      /**
       * Open url in InAppBrowser
       *
       * @param url
       * @param target
       * @param options
       */
      open(url = 'http://192.168.1.2/myurl/', target = '_blank', options = 'location=yes,hidden=no,hardwareback=yes,toolbar=yes')
      {
        try{
          var inAppBrowserRef = new InAppBrowser(url, target, options);
          inAppBrowserRef.on('loadstart').subscribe((result) => {
            alert(result);
            inAppBrowserRef.close();
          });
          inAppBrowserRef.on('mychange').subscribe((result) => {
            alert(result);
            this.inAppBrowserRef.close();
          });
          inAppBrowserRef.on('loadstop').subscribe((result) => {
            alert(result);
            this.inAppBrowserRef.close();
          });
          inAppBrowserRef.on('loaderror').subscribe((result) => {
            alert(result);
            inAppBrowserRef.close();
          });
        }catch(e){
          alert(e);
        }
      }
    }

And I get an Error on ‘loadstart’ event:
TypeError: Cannot read property ‘addEventListener’ on undefined

I think that all is allright. But it fire the error? What I’m doing wrong?
I use this pluguin https://ionicframework.com/docs/v2/native/inappbrowser/

And test it on emulator and on device with Android 6 version. The same problem.
In config.xml I use that code:

<allow-navigation href="*://192.168.1.2/*"/>

And I use the lastest Ionic 2.2.1 version.


#2

Well I am not sure if this part of your issue but the variable usage is all over the map. You set inAppBrowserRef as a variable of the class so it should you should be using this.inAppBrowserRef when using it. Second I would avoid using var and use let instead but in this case since the name variable is already a property of the class just stick with this. It looks like you set this up as a service how are you using it in a component? I have used a listener and got this error because the element that I was listening to was loaded before the method added the listener thus adding to a undefined element.


#3

At first version of service I used this.inAppBrowserRef instead of var variable. The error was the same.

May you implement some code or example. Because I’m trying to do it, but I’m not have a good skills with obeservable.

All is simple:

<ion-item-options side="right" *ngIf="order.isCanOnlinePay()">
    <button ion-button color="danger" (click)="onPayOrder(order)">
          <ion-icon name="basket"></ion-icon>
          Pay the order
    </button>
</ion-item-options>

In component:

export class UsersBlocksMyOrders extends AbstractBlock{


  /**
   *
   */
  constructor(
    public paymentService: OrderPaymentOnlineService,
  ){
    super(toastCtrl);

  }

onPayOrder(order:Order)
  {
    this.paymentService.openOrderPayment(this.paymentService.generatePaymentUrl(order));
  }
}

I hope this can tale you something.


#4

The problem was that I’m do not install pluguin before use the class. All in code was right.

ionic plugin add cordova-plugin-inappbrowser