CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic4
TKeita
TKeita

Reputation: 27

Ionic4: An error is output screen does not appear in the InAppBrowser

I want to output a browser when starting ionic using InAppBrowser, but an error is output and nothing is displayed on the display screen as a white page. Why?

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 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)

Upvotes: 2

Views: 451

Answers (3)

rtpHarry
rtpHarry

Reputation: 13125

Ionic 4 uses lazy loading which means that every page has a .module.ts file as well.

There is a providers section inside that which you need to put the InAppBrowser reference.

In your example it looks like you're trying to use it in home.page.ts so that means look for home.module.ts, which looks something like this:

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

And needs to be updated to something like this:

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

You can find this information in the future by looking at the main page of the Ionic Native documentation. It's confusing because each individual plugin just assumes you know about this page:

Upvotes: 1

MukulSharma
MukulSharma

Reputation: 221

You may try service providers

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

Upvotes: 0

Yahya Mukhtar
Yahya Mukhtar

Reputation: 474

Pleease add InAppBrowser in providers in module.ts file

Upvotes: 0

Related Questions