Implementing Ionic Native 3 in your mobile apps

March 26, 2017, 6:54 pm Categories:

Categories

** UPDATED FOR IONIC 3 **

Ionic Native version 3.x brings a couple of important changes to how plugins are implemented in your Ionic projects (note that version 3.x of Ionic Native does NOT support Ionic 1).

These changes are as follows:

  1. A native package needs to be installed for every plugin that is added to a project
  2. The application root module requires that the native package for each installed plugin is imported and added to the providers array

The core package for Ionic Native is, by default, included with Ionic (which is located at the following project path: /node_modules/@ionic-native) so it's only the individual Ionic Native package for each plugin added to your project that needs to be installed.

How this works is relatively simple.

Implementing an Ionic Native plugin

If, for example, you wanted to install the Geolocation plugin to your project you would begin by installing the plugin using the following command via the Ionic CLI:

ionic cordova plugin add cordova-plugin-geolocation

In case you're wondering this process also works with using the cordova command line tool to install Ionic compatible plugins (which is pretty helpful considering the size of the cordova plugin ecosystem).

You would then add that plugin's Native package to your project using npm:

npm install --save @ionic-native/geolocation

Notice how we simply add the name of the plugin AFTER the @ionic-native/ directory declaration?

All Native packages added to a project will follow the same convention.

Once completed the command also adds an entry, akin to the following, to the dependencies node of the package.json file for your project:

"@ionic-native/geolocation": "^3.2.4",

Next, within your project root module - /src/app/app.module.ts - you would then import the installed Ionic Native package, in this case the Geolocation package, and subsequently declare this within the providers array as demonstrated here:

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 { Geolocation } from '@ionic-native/geolocation';

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

Finally, you would then import the Ionic Native package for that plugin into the component where you would want that to be used - for example:

import { Geolocation } from '@ionic-native/geolocation';

Fairly simple right?

A word of warning...

When attempting to build a project using Ionic Native plugins you may encounter the following error:

Module 'node_modules/@ionic-native/core/index' has no exported member 'IonicNativePlugin'

IF this should happen then take a look at this article which details how to fix the issue.

In Summary

Ionic Native 3.x adds a couple of additional steps for installing/using Ionic Native plugins within Ionic projects but, as you can see from the above installation flow, these aren't particularly arduous or time consuming.

As the core package for Ionic Native is installed by default with version 2+ of the Ionic Framework all you have to remember as developers is install the Ionic Native package for EACH plugin that you add to your projects.

If you enjoyed what you've read here then please sign up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for further information about using Ionic Native/Apache Cordova plugins within Ionic.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top