Ionic3: Cannot declare InAppBrowser

Question

I want to use InAppBrowser to open all target blank links. I follow the documentation and I always get an error when I declare the plugin on constructor:

Can't resolve all parameters for MyApp: (?, ?, ?).

This error appears to me when I put private iab: InAppBrowser on constructor.

My code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { Platform } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})


export class HomePage {

 constructor(public navCtrl: NavController, public plt: Platform, private iab: InAppBrowser) {

    this.plt.ready().then((readySource) => {
        console.log("Ready!");
        window.open = this.iab.open;
    });
  }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Someone knows whats it can be?

Thanks!

Answer 1

Your code looks good, so the problem seems to be because of the @ionic-native/core version that your project uses.

As you can see in the docs the Ionic team has updated the Ionic Native commands in order to avoid this error:

Installation

To add Ionic Native to your app, run following command to install the core package: npm install @ionic-native/core@4 --save

And...

Usage

Install the Needed Plugins Install the Ionic Native package for each plugin you want to add. For example, if you want to install the Camera plugin, you will need to run the following command:

npm install @ionic-native/camera@4 --save

Then install the plugin using Cordova or Ionic CLI. For example:

ionic cordova plugin add cordova-plugin-camera

Notice the @4 in both commands. That allows you to install the right version of the Ionic Native dependencies even if you're using the new CLI.

---

TLDR; So if you installed the plugin using the @4 you can import it like this: import { InAppBrowser } from '@ionic-native/in-app-browser';

If not, you may be using a newer version of Ionic Native so you need to import it like this: import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'