IONIC APP- [$injector:unpr] Unknown provider:

Question

I'm getting this error and have been looking for it on the google but still couldn't solve this issue.

 ionic.bundle.js:26799 Error: [$injector:unpr] Unknown provider: $cordovaCameraProvider <- $cordovaCamera <- CameraCtrl

app.js code given below

angular.module('starter', ['ionic','ng-Cordova','starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
     .state('tab', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })


      .state ('camera',{
       url:'/camera',
       controller:'CameraCtrl'
    })

     .state('tab.account', {
          url: '/done',
          views: {
          'tab-d': {
           templateUrl: 'templates/d.html',
           controller: 'DCtrl'
       }
    }
 });

  $urlRouterProvider.otherwise('/abc');

 });

Controller.js code given below

.controller('CameraCtrl', function($scope, $cordovaCamera) {

  document.addEventListener("deviceready", function () {

    var options = {
       quality: 50,
       destinationType: Camera.DestinationType.DATA_URL,
       sourceType: Camera.PictureSourceType.CAMERA,
       allowEdit: true,
       encodingType: Camera.EncodingType.JPEG,
       targetWidth: 100,
       targetHeight: 100,
       popoverOptions: CameraPopoverOptions,
       saveToPhotoAlbum: false,
       correctOrientation:true
     };

     $cordovaCamera.getPicture(options).then(function(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
     }, function(err) {
      // error
    });

  }, false);
})

on clicking this icon it should open camera to capture image

<a href="#/camera"><i class="icon ion-camera"></i></a>

Answer 1

I solved this issue in below steps :

Step 1 : Use bower to install ngCordova

$ bower install ngCordova --save

Step 2 : Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js and after your AngularJS / Ionic file (since ngCordova depends on AngularJS).

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Step 3 : Then, include ngCordova as a dependency in your angular module:

angular.module('myApp', ['ngCordova'])

Reference : http://ngcordova.com/docs/install/