Ionic4：错误是输出屏幕未出现在 InAppBrowser 中答案

【问题标题】：Ionic4: An error is output screen does not appear in the InAppBrowserIonic4：错误是输出屏幕未出现在 InAppBrowser 中
【发布时间】：2020-03-05 15:16:31
【问题描述】：

我想在使用 InAppBrowser 启动 ionic 时输出一个浏览器，但是输出一个错误并且显示屏幕上没有任何内容显示为白页。为什么？

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)

【问题讨论】：

标签： angular typescript ionic-framework ionic4

【解决方案1】：

请在module.ts文件的提供者中添加InAppBrowser

【讨论】：

感谢您的回答。如果您能更详细地解释，我将不胜感激。谢谢。

【解决方案2】：

你可以试试服务商

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

【讨论】：

感谢您的回答。我尝试添加代码，但“找不到模块”。被展示。要添加这个ionic g provider service-provider我可以通过运行添加它吗谢谢。
@TKeita..你在 app.module.ts 中导入了 StatusBar、SplashScreen 吗？？
感谢您的回答。两者都是进口的。 ' ServiceProvider, {provide: ErrorHandler, useClass: IonicErrorHandler} ' 如果没有找到这个 'IonicErrorHandler'，则输出错误。 import {IonicModule, IonicRouteStrategy, IonicErrorHandler} from '@ ionic / angular 添加后，显示“未找到模块”。你有什么要补充的吗？

【解决方案3】：

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 文档的主页找到这些信息。这很令人困惑，因为每个单独的插件都假设你知道这个页面：

Community Plugins - Ionic Documentation

【讨论】：

感谢您的回答。等效代码已添加到 module.ts 文件中。可能这是提供程序错误，但我不知道如何导入。请教教我好吗？谢谢。