Open URLs in Browser with Ionic 5/Angular,Cordova InAppBrowser plugin and Ionic Native

Open URLs in Browser with Ionic 5/Angular,Cordova InAppBrowser plugin and Ionic Native

In this post we will give you information about Open URLs in Browser with Ionic 5/Angular,Cordova InAppBrowser plugin and Ionic Native. Hear we will give you detail about Open URLs in Browser with Ionic 5/Angular,Cordova InAppBrowser plugin and Ionic NativeAnd how to use it also give you demo for it if it is necessary.

Throughout this tutorial, we are going to see a detailed example showing how to open external URLs in Ionic 5 mobile apps based on Angular using the Cordova plugin InAppBrowser and Ionic Native.

SEE ALSO:

Full Ionic 5/Angular Mobile App with Ionic Native and InAppBrowser

AND

Ionic 2/3 : Using Cordova SQLite and Barcode Scanner plugins to build a product inventory manager

Now let’s get started!

Create a New Ionic 5/Angular Project

We will start by generating a new Ionic 5/Angular project with Ionic CLI 4 so open up your terminal if your are developingunder a Linux/MAC system or your command prompt under Windows and type!

ionic start ionic-inappbrowser-example blank --type=angular 

Note: Under Windows the recommended way to work with Ionic 5 is through visual studio.

Next, navigate inside your project folder:

cd ionic-inappbrowser-example

Add your target platform using the following command:

cordova platform add android 

We are developing with Ubuntu so we can only target Android devices. If you are under a MAC you can target iOS too using:

cordova platform add iOS

Note : If you don’t have Cordova already installed you can easilly install it via npm with

npm install -g cordova 

Adding the InAppBrowser Cordova Plugin

Next, you just need to add the InAppBrowser plugin using the following command:

cordova plugin add cordova-plugin-inappbrowser

Now we are ready to add some code to our project to open external URLs. So go ahead and open the home.ts fileand modify it to look like the following:

import { Component } from '@angular/core';import { NavController , Platform} from 'ionic-angular';import { InAppBrowser } from 'ionic-native';@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {constructor( public platform: Platform,public navCtrl: NavController) {}openUrl() {        this.platform.ready().then(() => {            let browser = new InAppBrowser("https://onlinecode.org",'_blank');        });}    }

We have started by importing the InAppBrowser plugin from the ionic-native module then we haveadded the openUrl() method that will handle opening the specified URL.

Next open your your template and add the button to test the method:

Note: Don’t use the old .open() method

 InAppBrowser.open(url, "_system");

Many developers are getting this error

Uncaught Error: Can’t resolve all parameters for InAppBrowser: (?, ?, ?).

Because it is deprecated with Ionic Native. Instead you should use the following method:

let browser = new InAppBrowser('YOUR_URL', "_system");

Serving your Ionic 5 App

Next, just execute the following command:

ionic serve 

You can the play with your demo on the browser by visiting the http://localhost:8100/ address.

When you are finished testing, you can build your app for you target platform using the following command:

ionic build android | iOS

You can find the example application we have build in this GitHub repository{target:_blank}


Hope this code and post will helped you for implement Open URLs in Browser with Ionic 5/Angular,Cordova InAppBrowser plugin and Ionic Native. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US