Ionic InAppBrowser issue. Not always working


#1

Hi,

I currently have an Ionic app that creates an InAppBrowser pointing to a Website. I have deployed it to my Android phone, however there is a big issue.

Sometimes the app doesn’t work and opens the website with my default browser. Sometimes it does work and opens the website in the app using InAppBrowser.

I have tried using the different targets self, blank, system and different Android phones, but nothing fully works.

I am really confused and tried a number of things, any ideas?
Thanks in advance.

Below are my code files:

home.html

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      InAppBrowser
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  InAppBrowser Not Displayed.
</ion-content>

home.ts

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

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

  constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser) {
	  const options: InAppBrowserOptions = {
		  toolbar: 'no',
		  location: 'no',
		  zoom: 'no'
	  }
	  
	  const browser = this.inAppBrowser.create("https://www.awebsite.co.uk", '_self', options);
  }
}

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { InAppBrowser } from '@ionic-native/in-app-browser';

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

#2

Hi guys,

Found the solution, I had to add some code to run only when the app is ready.

code:

this.platform.ready().then( () => {
        const browser = this.inAppBrowser.create("https://www.awebsite.co.uk", '_self', options);
     })