Ionic-native: InAppBrowser in Ionic 4

Created on 6 Mar 2019  路  2Comments  路  Source: ionic-team/ionic-native

I'm submitting a ... (check one with "x")
[* ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
Ionic 4 build fails with InAppBrowser plugin installed

Expected behavior:
Successful build

Steps to reproduce:

Install InAppBrowser in an ionic-angular 4 Project
Use plugin in a component

Related code:

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


@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.scss']
})
export class FeedComponent implements OnInit {

  constructor(private iab: InAppBrowser) { }

  openDetail(url){
    const browser = this.iab.create('https://ionicframework.com/', '_blank');
    // browser.close();
  }

  ngOnInit() {
  }

}

Other information:

image

ERROR in src/app/app.module.ts(37,5): error TS2322: Type 'InAppBrowserOriginal' is not assignable to type 'Provider'.
Type 'InAppBrowserOriginal' is not assignable to type 'ClassProvider'.
Property 'provide' is missing in type 'InAppBrowserOriginal'.
src/app/components/feed/feed.component.ts(39,28): error TS2304: Cannot find name 'InAppBrowser'.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)             : 4.10.3
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v11.10.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.7.0
   OS     : Windows 10

package.json

{
  "name": "bmapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/pwa": "^0.12.3",
    "@angular/router": "^7.2.2",
    "@angular/service-worker": "^7.2.2",
    "@ionic-native/core": "^5.2.0",
    "@ionic-native/in-app-browser": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "cordova-browser": "5.0.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-inappbrowser": "3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.4.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.4",
    "ionic": "^4.10.3",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.4.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "^7.2.7",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular": "^4.0.2",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

Most helpful comment

Ionic 4 brings in support for multiple platforms (angular / react / vue). You need to import plugins such as the in-app-browser specifying which type you want in the import (e.g for angular `import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'

All 2 comments

Ionic 4 brings in support for multiple platforms (angular / react / vue). You need to import plugins such as the in-app-browser specifying which type you want in the import (e.g for angular `import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'

Well this is embarrassing... I messed up the import, sorry about that.

Was this page helpful?
0 / 5 - 0 ratings