I am getting the following error from angular.js library. How can i debug the below console error?
angular.js:12477 Error: [$injector:unpr] Unknown provider: cookiesServiceProvider <- cookiesService <- CatalogViewController
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=cookiesServiceProvider%20%3C-ookiesService%20%3C-%20CatalogViewController
at http://testsite/Scripts/angular_bootstrap_UI/angular.js:68:12
at http://testsite/Scripts/angular_bootstrap_UI/angular.js:4289:19
at Object.getService [as get] (http://testsite/Scripts/angular_bootstrap_UI/angular.js:4437:39)
at http://testsite/Scripts/angular_bootstrap_UI/angular.js:4294:45
at getService (http://testsite/Scripts/angular_bootstrap_UI/angular.js:4437:39)
at invoke (http://testsite/Scripts/angular_bootstrap_UI/angular.js:4469:13)
at Object.instantiate (http://testsite/Scripts/angular_bootstrap_UI/angular.js:4486:27)
at http://testsite/Scripts/angular_bootstrap_UI/angular.js:9151:28
at http://testsite/Scripts/angular-ui-router.js:4018:28
at invokeLinkFn (http://testsite/Scripts/angular_bootstrap_UI/angular.js:8789:9)
You need to include the cookies part of angular
https://code.angularjs.org/1.4.7/angular-cookies.js
and inject it in your module
angular.module('myModule', ['ngCookies'])
make sure you don't get 404 for the cookies
Related
I have a module 'moduleA' that has 2 services, and one(serviceB) is depending on the other one(serviceA). I am trying to inject serviceB into a controller which belongs to a different module 'foo', however I got unknown provider error. Below is my code:
module.js
angular.module('moduleA', []);
factory-a.js
angular
.module('moduleA')
.factory('factoryA', factoryA);
factoryA.$inject = ['$q', '$log', '$timeout'];
function factoryA($q, $log, $timeout) {
//Do Stuff
}
factory-b.js
angular
.module('moduleA')
.factory('factoryB', factoryB);
factoryB.$inject = ['factoryA'];
function factoryB(factoryA) {
//Do Stuff
}
foo-controller.js
angular.module('foo', ['moduleA'])
.controller('fooController', ['factoryB', function(factoryB){
//Do Stuff
})
Error in Console:
generic-console-medium.js:23 2016-11-27 18:49:42.395 - [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController Error: [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController
at http://localhost:9001/components/angular/angular.js:68:12
at http://localhost:9001/components/angular/angular.js:4458:19
at Object.getService [as get] (http://localhost:9001/components/angular/angular.js:4611:39)
at http://localhost:9001/components/angular/angular.js:4463:45
at getService (http://localhost:9001/components/angular/angular.js:4611:39)
at injectionArgs (http://localhost:9001/components/angular/angular.js:4635:58)
at Object.invoke (http://localhost:9001/components/angular/angular.js:4657:18)
at $controllerInit (http://localhost:9001/components/angular/angular.js:10115:34)
at nodeLinkFn (http://localhost:9001/components/angular/angular.js:9033:34)
at http://localhost:9001/components/angular/angular.js:9433:13
This might sound trivial but Did you include your factory-b.js file in your project?
I think you should fix the code shown below. Everything looks fine except for this.
function factoryA($q, $log, $timeout) { //remove the ''
//Do Stuff
}
I'm testing an ionic app created using creator.
I put the following code in services.js.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.factory('EventService', ['$resource', function ($resource) {
return $resource('https://.....net/api/events/:id');
}])
.service('BlankService', [function(){
}]);
And the following code in controllers.js.
angular.module('app.controllers', [])
......
.controller('nightlifeCtrl', function ($scope, EventService) {
$scope.events = EventsService.query({category: "Nightlife"});
})
Hoever I got the following error in js console?
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20EventService
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at Object.invoke (ionic.bundle.js:17753)
at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)
at Object.invoke (ionic.bundle.js:17762)
at ionic.bundle.js:17580
at getService (ionic.bundle.js:17721)
I tried to add the dependency by angular.module('...', ['ngResource']) but it got the following error.
ionic.bundle.js:17697 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
And I didn't find the file angular-resource.js in the js files. Should I avoid ngResource and use plain ajax call?
In index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
Its not working because you have not loaded the angular-resource dependency. If you want to use an external module in angular, you need to load it as a dependency in your module definition by passing name of the module in the second array parameter to angular.module. In your case name of the module is ngResource. Load the script file for angular-resource.js and then add it as dependency as below:
angular.module('app.services', ['ngResource'])
Also I see that you have not loaded app.services as dependency in app.controller. You need to either load that dependency or load both these dependencies in your app definition module as:
angular.module('app', [
'app.services',
'app.controllers'
]);
Updated JSBIN with fix for console error
Your code also had one typo. You were referring to EventsService in your controller while the name was EventService. I have fixed that as well in the jsbin
I am trying to use this plugin https://github.com/jtblin/angular-chart.js.
And I am getting this error (I don't think the problem is with the plugin instead it's in the way I'm doing the injection!!):
Error: [$injector:unpr] Unknown provider: chart.jsProvider <- chart.js <- WhateverCtrl
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=chart.jsProvider%20%3C-hart.js%20%3C-%20WhateverCtrl
at http://mega.app/scripts/vendor.js:9895:12
at http://mega.app/scripts/vendor.js:13863:19
at Object.getService [as get] (http://mega.app/scripts/vendor.js:14010:39)
at http://mega.app/scripts/vendor.js:13868:45
at getService (http://mega.app/scripts/vendor.js:14010:39)
at invoke (http://mega.app/scripts/vendor.js:14042:13)
at Object.instantiate (http://mega.app/scripts/vendor.js:14059:27)
at http://mega.app/scripts/vendor.js:18356:28
at http://mega.app/scripts/vendor.js:44696:28
at invokeLinkFn (http://mega.app/scripts/vendor.js:18113:9)
when I inject chart.js globally like below, I don't get any error. (keep reading)
angular.module('my-app', [
'chart.js' // <<<<<
'ui.router',
'ngStorage',
// ...
]);
})();
But from my understanding, it's recommended to inject this module only in the controllers that uses it, thus when I try to inject it in a controller like below, I get the error above.
angular
.module('my-app')
.controller('WhateverCtrl', ctrl);
ctrl.$inject = ['chart.js']; // <<<<<
function ctrl() {
var vm = this;
// ...
However if I remove the $ from the injection line to ctrl.inject = ['chart.js']; I do get rid of the error, but chart.js wont work, because I guess I must pass it to the function function ctrl() { like this function ctrl(chart.js) { which of course causes an error due to the ..
Since angular-chart.js is itself a module, it must be injected into the module and cannot be injected into the controller.
With JGOakley's clarification, I was able to discover this line in angular-chart.js
return angular.module('chart.js', [])
.provider('ChartJs', ChartJsProvider)
To include this for use in your controller:
YourModule.$inject = ['ChartJs'];
This was a frustrating find, since I took this line to mean I could reference it as chart
define(['angular', 'chart'], factory);
I am using angularjs-imageupload-directive for upload image in base64 in my application.
This directive give me error as below.
Error: [$injector:unpr] http://errors.angularjs.org/1.2.27/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-NaNmageDirective
at Error (native)
at http://www.example.com/min/admin-production.min.js:19:10395
at http://www.example.com/min/admin-production.min.js:19:25331
at Object.c [as get] (http://www.example.com/min/admin-production.min.js:19:24402)
at http://www.example.com/min/admin-production.min.js:19:25405
at c (http://www.example.com/min/admin-production.min.js:19:24402)
at Object.d [as invoke] (http://www.example.com/min/admin-production.min.js:19:24617)
at http://www.example.com/min/admin-production.min.js:19:29463
at f (http://www.example.com/min/admin-production.min.js:19:10732)
at Object.<anonymous> (http://www.example.com/min/admin-production.min.js:19:29430)
Anyone have solution for this.
angularjs-imageupload-directive use following.
angular.module('imageupload', [])
.directive('image', function($q) {...}
It is not work after uglify. For the param $q may be converted to another name such as a,b,c,f, etc by uglify compiler.
So i convert it to and it works perfectly.
angular.module('imageupload', [])
.directive('image', ['$q', function($q) {...}]
Tryin' to get started with testing in angularjs (based on this) but can't seem to get the mocks working correctly. Here's my jasmine file:
describe 'FlightsController', ->
beforeEach module 'surf-air'
beforeEach inject ($rootScope, $controller) ->
scope = $rootScope.$new()
FlightsController = $controller('FlightsController', {scope: scope})
it 'should work', -> expect(true).toBe(true)
And here's what Testacular spits back:
Chrome 23.0 FlightsController should work FAILED
Error: Unknown provider: $scopeProvider <- $scope
at Error (<anonymous>)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:28:395
at Object.c [as get] (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:26:180)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:28:476
at c (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:26:180)
at d (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:26:314)
at Object.instantiate (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:27:455)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:50:239
at null.<anonymous> (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:9:34)
at Object.d [as invoke] (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:27:325)
Error: Declaration Location
at window.jasmine.window.inject.angular.mock.inject (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/lib/js/angular-mocks.js:1717:25)
at null.<anonymous> (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:6:16)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:4:3
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:18:4
Chrome 23.0: Executed 1 of 1 (1 FAILED) (0.221 secs / 0.04 secs)
which is caused by:
$controller('FlightsController', {scope: scope})
Any ideas?
Change this line
FlightsController = $controller('FlightsController', {scope: scope})
to the following
FlightsController = $controller('FlightsController', {$scope: scope})
I have updated the example jsfiddle to CoffeeScript: http://jsfiddle.net/jaimem/5Afbm/2/