Search code examples
angularionic-frameworkionic-nativeinappbrowserngx-bootstrap

Ionic - InAppBrowser keep opening system external web browser not in-app one


In Ionic App page (ionic serve's localhost:8100 page), the developer console logged the warning

Native: InAppBrowser is not installed or you are running on a browser. Falling back to window.open.

What happened in web browser is actually also happened when I tested it on the device (ionic cap run android). The website was opened on device's default external web browser instead of the app's "in-app" web browser. I think because the InAppBrowser was never installed to the device during the build. But I have no idea why.

Below is the most simplified workable version of my codes. Feel free to ask if more needed.


main.ts

if (environment.production) enableProdMode();
platformBrowserDynamic().bootstrapModule(App).catch(err => console.log(err));

app.ts

@NgModule({
  declarations: [Comp],
  entryComponents: [],
  imports: [
    IonicModule, CommonModule, FormsModule, BrowserModule, IonicModule.forRoot(), Routing
  ],
  providers: [
    InAppBrowser, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [Comp]
})
export class App {}

routing.ts

const routes: Routes = [
  { path: '', loadChildren: () => import('./home').then(m => m.Home) }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class Routing {}

component.ts

@Component({
  selector: 'app-root', templateUrl: 'component.html', styleUrls: ['component.scss'],
})
export class Comp {}

home.ts

@NgModule({
  imports: [
    CommonModule, FormsModule, IonicModule, RouterModule.forChild([{path: '', component: Page}])
  ],
  declarations: [Page]
})
export class Home {}

page.ts

export class Page{

  constructor(private iab : InAppBrowser, private platform : Platform) {}

  ngOnInit(){
    this.iab.create(URL, _blank); //tried _self too. not working
  }
}

Solution

  • Forgot to install the plugin before installing the package. My apologize for the lack of information.

    ionic cordova plugin add cordova-plugin-inappbrowser

    But yet the inconvenience should be handled better. Still wonder why missing plugin doesn't regarded as an error.