Receiving "Unknown provider: UploadProvider" error using ng-file-upload - angularjs

I'm attempting to use the ng-file-upload directive (https://github.com/danialfarid/ng-file-upload) to add file-uploading functionality to my project, but keep getting this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.6/$injector/unpr?p0=UploadProvider%20%3C-%20Upload%20%3C-%20ExperimentController
at Error (native)
at http://localhost:8000/static/editor/js/angular.min.js:6:416
at http://localhost:8000/static/editor/js/angular.min.js:40:409
at Object.d [as get] (http://localhost:8000/static/editor/js/angular.min.js:38:394)
at http://localhost:8000/static/editor/js/angular.min.js:40:483
at d (http://localhost:8000/static/editor/js/angular.min.js:38:394)
at e (http://localhost:8000/static/editor/js/angular.min.js:39:161)
at Object.instantiate (http://localhost:8000/static/editor/js/angular.min.js:39:310)
at http://localhost:8000/static/editor/js/angular.min.js:80:313
at A.link (http://localhost:8000/static/editor/js/angular-route.min.js:7:268) <div ng-view="" ng-show="main.results==null" class="ng-scope">
I'm including the correct files in my index.html:
<script src="/static/editor/js/angular.min.js"></script>
<script src="/static/editor/js/ng-file-upload-shim.js"></script>
<script src="/static/editor/js/ng-file-upload.js"></script>
I'm declaring it my module:
(function() {
angular
.module('myApp', [
'ngRoute',
'ngAnimate',
'ngCookies',
'ngFileUpload'
]);
})();
But when I attempt to inject it into my controller, it throws the above error:
(function() {
angular
.module('myApp')
.controller('myController', myController);
myController.$inject = ['$routeParams',
'$compile',
'$scope',
'$interval',
'Upload'];
function myController($routeParams,
$compile,
$scope,
$interval,
Upload) {
....
I'm using Angular 1.4.6, and ng-file-upload 9.0.14. I downloaded the files manually, and included the indicated .js files in my project directory. Are there maybe some extra dependencies that are included via bower or npm that I'm missing?
Any help would be greatly appreciated!
UPDATE: Viewing the ng-file-upload directive's live demo page with AngularJS 1.4.6 (https://angular-file-upload.appspot.com/#/1.4.6) also causes numerous errors, so this might just be an incompatibility with 1.4.6 and the lastest version of ng-file-upload.

You are trying to inject unknown service called "Upload", if you mean the upload service of ng-file-upload you need to inject "ngFileUpload" instead of "Upload".
myController.$inject = ['$routeParams',
'$compile',
'$scope',
'$interval',
'ngFileUpload'];
function myController($routeParams,
$compile,
$scope,
$interval,
ngFileUpload) {
....

Related

debugging angular 'unknown provider'

I'm trying to get this fileuploader plugin working on a page (it's actually .cshtml, but hopefully that's not the source of the problem). I don't know how to debug angular references to find out what's missing.
The fileuploader does work in a different place in the app:
markup: Views\Shared_MasterClientLayout.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<body id="ng-app" ng-app="clientPortal"
controller: www\public\app\disabilities\disabilities.app.js
(function () {
'use strict';
var app = angular.module('disabilities', ['angularFileUpload']);
app.controller('disabilitiesController', ['$scope', '$rootScope', '$routeParams', '$fileUploader', disabilitiesController]);
function disabilitiesController($scope, $rootScope, $routeParams, $fileUploader) {
}
})();
But it does not work on my page:
markup: Views\Referral\ThankYou.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<div id="ng-app" ng-app="cmorApp">
controller: ReferralContent\app\CreateReferral\cm.attachmentUploadCtrl.js
var AttachmentUploadCtrl = ['$scope', '$http', '$fileUploader',
function ($scope, $http, $fileUploader) {
I get
Uncaught Error: [$injector:unpr] Unknown provider: $fileUploaderProvider <- $fileUploader
I can see on the Sources tab in Dev tools that angular-file-upload-min.js has been loaded.
The worst part about this is a lack of consistency of implementation across pages that the various components are spread across. I know of no way to debug angular empirically.
I literally have no way to tell which of several apps is running, which controller is attached to a page and which is referring to what page.
Is there any way of inspecting a page and exposing what objects are loaded on it?
Can I write console.log(ng-app) and have it return 'cmorApp'?
Or console.log(app.controller) and have it return 'AttachmentUploadCtrl'?

cookies add to controller - $cookies

How add cookie to my controller correct?
It`s error when I use $cookie otherwise everything works.
angular.module('app', ['ngCookies']);
app.controller('loginCtrl', function ($scope, $http, $state, Authorization, $cookies) {
$cookies.put('expires', 'example');
});
Error
angular.js:13920 Error: [$injector:unpr]
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24cookiesProvider%20%3C-%20%24cookies%20%3C-%20loginCtrl
at Error (native)
at http://localhost:64757/Scripts/angular.min.js:6:412
at http://localhost:64757/Scripts/angular.min.js:43:174
at Object.d [as get] (http://localhost:64757/Scripts/angular.min.js:40:432)
at http://localhost:64757/Scripts/angular.min.js:43:236
at d (http://localhost:64757/Scripts/angular.min.js:40:432)
at e (http://localhost:64757/Scripts/angular.min.js:41:158)
at Object.instantiate (http://localhost:64757/Scripts/angular.min.js:42:24)
at http://localhost:64757/Scripts/angular.min.js:90:32
at q (http://localhost:64757/Scripts/AngularUI/ui-router.min.js:7:14338)
If you go to the url that the error gives you: https://docs.angularjs.org/error/$injector/unpr?p0=$cookiesProvider%20%3C-%20$cookies%20%3C-%20loginCtrl
Your angular app is unable to find your dependency. Did you install the angular cookies file? You can install it with:
npm install angular-cookies
OR
bower install angular-cookies
Also when you declare your angular app you should assign it to a variable then use it for your controllers.
var app = angular.module('app',['ngCookies']);
app.controller('loginCtrl', function ($scope, $http, $state, Authorization, $cookies) {
$cookies.put('expires', 'example');
});

How to inject on Angular an ionic plugin that is not from ngCordova

in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' 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.
I am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.

Using $cookies in controller generates TypeError: undefined is not a function

UPDATE: ISSUE RESOLVED
Turns out I was not aware that the ngCookies was a separate service which is not part of the standard angular.js. My bower.json file was referencing angular 1.4beta but the angular-cookies was still loading 1.3. I changed that to 1.4beta and everything is working as expected.
I am using $cookies in a controller in an Angular 1.4 project but I am getting the following error when I reference $cookies:
TypeError: undefined is not a function
at Object.<anonymous> (http://localhost:9000/bower_components/angular-cookies/angular-cookies.js:60:16)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:4224:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at http://localhost:9000/bower_components/angular/angular.js:4189:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4330:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4362:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4379:27)
at http://localhost:9000/bower_components/angular/angular.js:8668:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:981:26) <div ng-view="" class="ng-scope">
My code:
angular.module('supportalApp', [
'ngCookies',
'ngAnimate',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'cfp.hotkeys',
'ngClipboard']);
angular.module('supportalApp')
.controller('ToolsCtrl', function($scope, $cookies) {....
});
If I remove $cookies, no errors are rendered. And just to confirm, I have included 'ngCookie' in the app
Note that the $cookies API used to be an associative array before AngularJS v1.4.0-beta.6, and the online documentation (defaulting to a development snapshot) already refers to the new get/put API. The relevant change is https://github.com/angular/angular.js/commit/38fbe3ee8370fc449b82d80df07b5c2ed2cd5fbe
With AngularJS <= v1.4.0-beta.5, you have the following choices:
Use $cookieProvider
$cookies["key"] = value
$cookies.key = value
(Upgrade AngularJS)
I don't see 'ngCookies' added in your module dependency, please add it.
angular.module('supportalApp', ['ngCookies'])
.controller('ToolsCtrl', function($scope, $cookies) {....
});

Uncaught Error: No module: ngRoute

i am using ngRoute module but its showing me error so is there extra file need to add for using this module i search but i did'nt found like other modules resourse,cookies we need seperate files for is it for ngroute also if yes so where can i found this
Error:-
Uncaught Error: No module: ngRoute
var app = angular.module('inventoryApp', ['ngCookies','ngResource', 'ngRoute']);
controller.js
app.controller('storesController', function ($rootScope, $scope, $location, $cookies, $routeParams) {
});
You do need a separate file. Please see:
http://docs.angularjs.org/api/ngRoute
First include angular-route.js in your HTML:
<script src='angular.js'>
<script src='angular-route.js'>
As of AngularJS 1.2.0, ngRoute is separated in its own module.
Download: http://code.angularjs.org/1.2.1/
Changelog: https://github.com/angular/angular.js/blob/master/CHANGELOG.md

Resources