angular - Ionic4: Se produce un error, la pantalla no aparece en el InAppBrowser

Quiero abrir un navegador al iniciar Ionic usando InAppBrowser, pero se produce un error y no se muestra nada en la pantalla, quedando en blanco. ¿Por qué?

app.module.ts:

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

@NgModule({
 (ellipsis)
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    InAppBrowser // add
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

inicio.página.ts

import { Component, OnInit} from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';　// add

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(private inAppBrowser: InAppBrowser) {} // add

  ngOnInit() {
    const browser = this.inAppBrowser.create('https://www.google.com', '_blank', { location: 'no', zoom: 'no'});
  }
}

error:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[HomePage -> InAppBrowser]: 
  StaticInjectorError(Platform: core)[HomePage -> InAppBrowser]: 
    NullInjectorError: No provider for InAppBrowser!
NullInjectorError: StaticInjectorError(AppModule)[HomePage -> InAppBrowser]: 
  StaticInjectorError(Platform: core)[HomePage -> InAppBrowser]: 
    NullInjectorError: No provider for InAppBrowser!
   (ellipsis)

Respuesta #1

Ionic 4 utiliza carga diferida, lo que significa que cada página también tiene un archivo .module.ts.

Hay una sección de proveedores dentro de eso en la que necesitas poner la referencia InAppBrowser.

En tu ejemplo parece que estás tratando de usarlo en home.page.ts, así que eso significa buscar home.module.ts, que se ve algo así:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

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

Y necesita actualizarse a algo como esto:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

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

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  providers: [
    InAppBrowser // add
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Puedes encontrar esta información en el futuro consultando la página principal de la documentación de Ionic Native. Es confuso porque cada plugin individual simplemente asume que conoces esta página:

• Plugins de la Comunidad - Documentación de Ionic

Respuesta #2

Por favor, agrega InAppBrowser en los proveedores en el archivo module.ts