Ionic/Cordova: How to integrate Cordova Plugins into existing Ionic project?
Solution 1
Follow these steps:
1. Include ngCordova before cordova.js
You can found the same description in the docs.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
2. Add your plugin on the command line
You can find this step in the docs in the section of your specific plugin.
ionic plugin add org.apache.cordova.camera
3. Remember that cordova is not available while working in the browser
So when using the $cordovaCamera.getPicture
the library is calling internally navigator.camera.getPicture
which is not available when developing in the desktop browser. Further reading
The ngCordova / Ionic team is currently working on mocks you can use to avoid problems like that.
You can download ngCordova here: http://ngcordova.com/docs/install/
Update: There is Ionic Native now, it's like ngCordova but for ES6 and TypeScript.
Solution 2
Open a terminal in your app's root directory and add the plugin via
cordova plugin add org.apache.cordova.camera
Edit:
the new command is:
cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add
Solution 3
I'm trying to figure out how to use standard Cordova plugins with Ionic myself, but the ionic team just recently built ngCordova--an angular wrapper for common cordova APIs, which includes the Camera api you want to use. Would suggest using that: see their docs for more info.
Solution 4
Go to the project directory.
Run this command:
$ ionic integrations enable cordova --quiet
(Hope this helps others.)
Solution 5
This is a common issue when testing on a browser: http://ngcordova.com/docs/common-issues/
BadmintonCat
iOS / Mac OSX / Unity3D developer and former Flash/AS3 developer in Tokyo, Japan. Also delving into C# .NET development.
Updated on February 25, 2020Comments
-
BadmintonCat about 4 years
I have an Ionic project where I need the Cordova Camera plugin (which I now installed successfully). But in my project the Camera API is still not available, i.e. I get error thrown:
ReferenceError: Camera is not defined at Scope.$scope.takePic
How do I active the plugin API(s) to be used in an Ionic project? Documentation about this seems to be rather nonexistant or very well hidden.
-
Eno over 9 yearsIm following the docs for ngCordova and testing on a real device. I get the same error. Im pretty sure $cordovaCamera is injecting correctly since I can print out $cordovaCamera in the console, BUT the problem Im having is Camera is undefined so you can't use the convenience constants such as Camera.DestinationType.DATA_URL in camera options.
-
David Marko over 9 yearsI have the same error here. Did you solve this problem?
-
Chad about 9 yearsThis did not work for me. I still get the
Camera is not defined
error. -
Subjective Effect almost 9 yearsDo you really need the factory? Can you not just add it to the controller for the view that uses it?
-
Chad almost 9 yearsPerhaps not, but I recall trying many different things and finally stumbling upon the factory, which was the first thing that worked for me. So, you may not need the factory, but I know it works with it.
-
Lotus almost 9 yearsI get "navigator not defined" when trying to build for ios
-
Chad almost 9 years@Lotus I do not have a mac so I have not tried building this for iOS yet. But I do know that this code has worked with the Ionic Viewer on my iPhone.
-
nclsvh over 8 yearsI have this error now
$cordovaCamera.getPicture is not a function
. Your solution did not work. Problem is: my camera function worked before, I have commented/deleted all my code I wrote after the camera function and it is still broken.. Tested on emulator, chrome linked to Android, and ionic lab -
Seasia Creative Crew over 7 yearsI have lot of work on camera. we cannot solve the issue.My Suggestion is to create new project and firstly add the camera plugin and then other plugns
-
MartianMartian over 6 yearsng-Cordova has to be downloaded here ngcordova.com/docs/install
-
RS. Utsha about 5 yearsThis command is for adding cordova to an existing ionic project. In other words, to integrate cordova in an existing ionic project.