How to import ionic-native into an Ionic1/AngularJS project?

Question

I'm working on a project with Ionic v1 and AngularJS and Cordova.

I'm trying to include this firebase plugin in my project with no luck so far: https://github.com/dpa99c/cordova-plugin-firebasex

I was told to try out this node module: https://github.com/ionic-team/ionic-native#angularjs

However, I keep getting this error:

Error: [$injector:nomod] Module 'ionic.native' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

<script src="../node_modules/@ionic-native/core/ionic-native-plugin.js"></script>

How can I make this work in my project and how can I import ionic-native properly?

Answer 1

Actually, I'm using ionic-native 5.23.0 in my angularJS project and I believe all 5.x versions have support for this angular version. If you take a look in ionic-native/core you will notice that exists a file called ng1. That file have a function called initAngular1 who iterate across object's properties creating angularJS services. Here's what I did.

1. First, I opened the script that I use as entry point in my webpack.config to create a bundle (Since I already had webpack installed, I used)
2. Inside this script, I wrote the following:

require('@ionic-native/core');
const appVersion = require('@ionic-native/app-version');
const sqlite = require('@ionic-native/sqlite');
const statusbar = require('@ionic-native/status-bar');
const toast = require('@ionic-native/toast');
const ng1 = require('@ionic-native/core/ng1')

ng1.initAngular1({ 
    AppVersion: appVersion.AppVersion,
    SQLite: sqlite.SQLite,
    Statusbar: statusbar.StatusBar,
    Toast: toast.Toast
});

3. Run webpack
4. Inject ionic.native module in your app.
5. Inject any plugin you would like to use with a $cordova prefix.

angular.module('myApp', ['ionic.native'])
  .controller('MyPageController', function($cordovaToast) {
    $cordovaToast.show('Hello from Ionic Native', '5000', 'center');
  });

Don't forget to install the cordova plugin used by the ionic-native plugin.

Answer 2

ionic-native stopped the support to angular ionic v1/angular 1,

https://github.com/ionic-team/ionic-native/tree/v3.x

For Ionic V1/Angular 1 support, please use version 2 of Ionic Native. See the 2.x README > for usage information.