How to use ionic-native in V1 app

#1

Instructions are to install using npm, wondering what to do past that. Can I just dump the dist in the lib folder? Also, wasn’t sure if there’s a module to import or anything like ngCordova.

Sorry if this is a clueless question :smiley:

1 Like
#2

No. Ionic Native is based on Angular 2, so Ionic 1 apps will not be able to use it. Take a look at it’s earlier version ngCordova.

Chris

#3

Unless I’m misunderstanding the docs, I don’t think that is the case. Check out the blog post about it’s release (http://blog.ionic.io/ionic-native-native-powers-for-your-app/): “Additionally, ngCordova was bound to Angular 1, and Ionic Native is framework agnostic.” “As of Ionic Native 1.3.0, Angular 1 is now supported out of the box”.
It also mentions Angular 1 and Ionic 1 in the docs: http://ionicframework.com/docs/v2/native/

I’m just not clear on how exactly to utilize the library.

#4

I forgot they back ported it to support 1.x

npm install ionic-native --save

If you are using Angular 1.x or plain ES5 JavaScript, you need to add ionic.native.js to your index.html before your application’s main code.

Install the plugin you wish to use

Then refer to the proper code sample at http://ionicframework.com/docs/v2/native/

#5

Thanks, I was having trouble with the import of ionic.native and removing ngCordova before. Not sure what I did different the second time around, but it seemed to work.

#6

This is the trouble point. There is almost no doc on how to use it in Ionic v1.x. Several samples would be very helpful coz the actual recommended way to back-engineere v2 code together with a bunch of plugins you have no experience with, back to v1.x code is a task for a week or two.

1 Like
#7

It’s pretty straightforward: In Ionic 1, just prepend $cordova to the name of the service (i.e. $cordovaCamera). If you mentally exchange every instance of the name of the service, then you have your doc for Ionic 1.

There’s a good example in the documentation.

#8

When installing it with npm install ionic-native --save and adding ionic.native.js to the index.html it says, ionic.native.js could not be found. What I’m doing wrong? The node_modules isn’t deployed to the app. I tried it with a completly new ionic1 app.

$ ionic info Your system information: Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 1.3.1 Ionic CLI Version: 1.7.16 Ionic App Lib Version: 0.7.3 ios-deploy version: 1.8.6 ios-sim version: 5.0.6 OS: Mac OS X El Capitan Node Version: v0.12.7 Xcode version: Xcode 7.3.1 Build version 7D1014

1 Like
#9

Maybe try it with Bower :slight_smile:

#10

I moved the dist from the node_modules to the lib folder so it was deployed (not sure if this is deal though). Also, make sure the ionic.native.js is loaded before the rest of the app (if you’re just replacing cordova.js it’s probably already correct).

#11

I did currently, but then the documentation is wrong, it says it should be installed with npm. Maybe the installation with bower is the reason for the problem we both are suffering from? And maybe the npm installation path is only valid for ionic 2?

Oh I wasn’t aware it’s a complete replacement for the cordova.js. Are you sure? The documentation lists an example of a warning which recommends to include cordova.js. Or did you mean ngCordova.js?

#12

Yea, you are right, I just got myself confused.

@Briends did you try installing with Bower? I was also confused by the npm install in the docs and was wondering if the bower would be the way to go.

#13

Yes with bower, the ionic-native.js is loadable. But now I have this problem: Ionic-native 'plugin not installed' but 'ionic plugin add' says already installed

#14

You just have to copy ionic.native.min.js to /lib like the docs indicate ionic.cloud.min.js should be included.

#15

Unfortunately, following the instructions doesn’t include an ionic.native.min.js anywhere.

npm install @ionic-native/core --save # From https://ionicframework.com/docs/native/
ionic cordova plugin add cordova-plugin-advanced-http # Next two from https://ionicframework.com/docs/native/http/
npm install --save @ionic-native/http

And output of find . |grep ionic | grep native in the myapp folder:

./node_modules/@ionic-native
./node_modules/@ionic-native/core
./node_modules/@ionic-native/core/ionic-native-plugin.js.map
./node_modules/@ionic-native/core/util.metadata.json
./node_modules/@ionic-native/core/util.js
./node_modules/@ionic-native/core/index.ngsummary.json
./node_modules/@ionic-native/core/util.js.map
./node_modules/@ionic-native/core/ionic-native-plugin.metadata.json
./node_modules/@ionic-native/core/ionic-native-plugin.ngsummary.json
./node_modules/@ionic-native/core/bootstrap.js
./node_modules/@ionic-native/core/index.metadata.json
./node_modules/@ionic-native/core/plugin.ngsummary.json
./node_modules/@ionic-native/core/util.ngsummary.json
./node_modules/@ionic-native/core/index.js
./node_modules/@ionic-native/core/plugin.d.ts
./node_modules/@ionic-native/core/bootstrap.metadata.json
./node_modules/@ionic-native/core/README.md
./node_modules/@ionic-native/core/decorators.ngsummary.json
./node_modules/@ionic-native/core/plugin.js.map
./node_modules/@ionic-native/core/package.json
./node_modules/@ionic-native/core/decorators.js
./node_modules/@ionic-native/core/decorators.metadata.json
./node_modules/@ionic-native/core/plugin.metadata.json
./node_modules/@ionic-native/core/ionic-native-plugin.d.ts
./node_modules/@ionic-native/core/index.js.map
./node_modules/@ionic-native/core/ionic-native-plugin.js
./node_modules/@ionic-native/core/bootstrap.ngsummary.json
./node_modules/@ionic-native/core/util.d.ts
./node_modules/@ionic-native/core/index.d.ts
./node_modules/@ionic-native/core/bootstrap.js.map
./node_modules/@ionic-native/core/decorators.js.map
./node_modules/@ionic-native/core/plugin.js
./node_modules/@ionic-native/core/bootstrap.d.ts
./node_modules/@ionic-native/core/decorators.d.ts
./node_modules/@ionic-native/http
./node_modules/@ionic-native/http/index.ngfactory.js.map
./node_modules/@ionic-native/http/index.ngsummary.json
./node_modules/@ionic-native/http/index.metadata.json
./node_modules/@ionic-native/http/index.js
./node_modules/@ionic-native/http/README.md
./node_modules/@ionic-native/http/package.json
./node_modules/@ionic-native/http/index.js.map
./node_modules/@ionic-native/http/index.d.ts

The instructions seem majorly lacking for using Native HTTP or Ionic Native in v1. What do I do next?

#16

I also get this:

[user@MBPR13 myapp]$ npm install ionic-native --save
npm WARN @ionic-native/http@4.11.0 requires a peer of @angular/core@* but none is installed. You must install peer dependencies yourself.
npm WARN myapp@0.0.1 No repository field.
npm WARN myapp@0.0.1 No license field.
#17

For anyone following, the full solution is here: