Ionic4: ошибка вывода экрана не отображается в InAppBrowser

Question

Я хочу вывести браузер при запуске ionic с помощью InAppBrowser, но выводится ошибка, и на экране дисплея ничего не отображается в виде белой страницы. Почему?

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 {}

home.page.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: 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)

Answer 1

Ionic 4 использует отложенную загрузку, что означает, что на каждой странице также есть файл .module.ts.

Внутри есть раздел провайдеров, в который необходимо поместить ссылку InAppBrowser.

В вашем примере похоже, что вы пытаетесь использовать его в home.page.ts, так что это означает, что ищите home.module.ts, который выглядит примерно так:

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 {}

И должен быть обновлен до чего-тонапример:

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 {}

Вы можете найти эту информацию в будущем, заглянув на главную страницу документации Ionic Native. Это сбивает с толку, потому что каждый отдельный плагин предполагает, что вы знаете об этой странице:

• Плагины сообщества - Ionic Documentation

Answer 2

Вы можете попробовать поставщиков услуг

import {ServiceProvider} from '../../providers/service-provider';
 providers: [
        ServiceProvider,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]

Answer 3

Пожалуйста, добавьте InAppBrowser в провайдерах в module.ts файле