Ionic3| Facing with an issue when add InAppBrowser into providers

Question

I need open a link into my Ionic-3 project and when I google it I saw InAppBrowser Plugin.

Actually there is only one picture in this link so If you know any other method for get it or show directly this picture it is can be enough for me.

I done all of it like what documentary done. The Documentary which is I used for : https://blog.paulhalliday.io/ionic-3-integrating-inappbrowser-plugin/

Step-1: I installed ionic cordova plugin add cordova-plugin-inappbrowser

Step-2: I installed as well npm install @ionic-native/in-app-browser --save

And there was no error in Command Line(Terminal)

Step-3: I imported the plugin into app.module.ts import { InAppBrowser } from '@ionic-native/in-app-browser'; And there was no error in code editor

!!! Step-4: When I tried to add InAppBrowser into providers part I faced an error like picture which below If you can not see : http://prntscr.com/mc964l link is here.

Why that error happened I do not get it.

Can anybody help me about this issue?

Thanks in advance!

Answer 1

Ionic 3:

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save @ionic-native/in-app-browser@4

You must append version 4 to the package name after the @ character (version 5.x is not compatible with Ionic 3):

Then, add to Provider:

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

...

@NgModule({
  ...

  providers: [
    ...
    InAppBrowser 
    ...
  ]
  ...
})
export class AppModule { }

Source: https://ionicframework.com/docs/v3/native/in-app-browser/

Ionic 4:

For Angular, the import path should end with /ngx

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

Then, add to Provider:

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

...

@NgModule({
  ...

  providers: [
    ...
    InAppBrowser 
    ...
  ]
  ...
})
export class AppModule { }

Source: https://ionicframework.com/docs/native#angular

Answer 2

Just in case there are people still facing this issue after upgrading to Angular 11 + I found out that the problem is with the ivy.

The import should look like this:

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