Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService? - angularjs

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

Related

Could not inject 'ngStorage' after including ngStorage file

I've included this line to use ngStorage
<script src="js/angularjs/ngStorage.min.js"></script>
and injected it to my controller named bookController like I always do
.controller('bookController', ['$scope', 'bookService', '$location', '$sessionStorage', function($scope, bookService, $location, $sessionStorage)
Why am I still getting injector error like this?
angular.min.js:118 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=<div ng-view="" class="ng-scope">essionStorageProvider%20%3C-%20%24sessionStorage%20%3C-%20bookController
at http://localhost/cm0665/js/angularjs/angular.min.js:6:412
at http://localhost/cm0665/js/angularjs/angular.min.js:43:174
at Object.d [as get] (http://localhost/cm0665/js/angularjs/angular.min.js:40:432)
at http://localhost/cm0665/js/angularjs/angular.min.js:43:236
at d (http://localhost/cm0665/js/angularjs/angular.min.js:40:432)
at e (http://localhost/cm0665/js/angularjs/angular.min.js:41:158)
at Object.instantiate (http://localhost/cm0665/js/angularjs/angular.min.js:42:24)
at http://localhost/cm0665/js/angularjs/angular.min.js:90:32
at Object.link (http://localhost/cm0665/js/angularjs/angular-route.min.js:7:274)
at http://localhost/cm0665/js/angularjs/angular.min.js:16:71
You help is much appreciated!
You need to inject the ngStorage module into your module.
Then you can use $sessionStorage in your controller.

angular.js Uncaught Error: [$injector:modulerr] when injecting a factory

I'm attempting to inject a factory called recipesApp.recipeData into my MainController, as soon as I added it, the app broke and I have been receiving the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module recipesApp due to:
Error: [$injector:modulerr] Failed to instantiate module recipesApp.recipeData due to:
Error: [$injector:nomod] Module 'recipesApp.recipeData' 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.
My main app module is written as follows:
var app = angular.module('recipesApp', ['ngRoute', 'recipesApp.recipeData']);
My controller:
app.controller('MainController', ['$scope', '$http', '$location', '$rootScope', 'recipeData',
function($scope,$http,$location,$rootScope,recipeData) {...}]);
My recipe factory:
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
I have tried changing the file structure, the file naming convention. I have tried simply linking it onto the controller itself in the same file, I've changed the order in which it is being injected, and I've triple checked the spelling. Any suggestions would be very helpful!
You're trying to add $http as a module dependency, $http is a service, not a module. Remove it from your recipesApp.recipeData module dependencies
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
Also make sure all the .js files are present in your index.html

Unable to inject $resouce angular js

I am trying to use $resouce for REST API call, but i am getting below error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:modulerr] Failed to instantiate module $resource due to:
Error: [$injector:nomod] Module '$resource' 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.
http://errors.angularjs.org/1.5.3/$injector/nomod?p0=%24resource
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13438:12
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15404:17
at ensure (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15328:38)
at module (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:15402:14)
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17894:22
at forEach (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17878:5)
at http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17895:40
at forEach (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8080/stockpicker/stockPickerApp/www/lib/ionic/js/ionic.bundle.js:17878:5)
below is my index.html where i have included angular.js and angular-resouce.js
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<script type="text/javascript" src="lib/ionic/js/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
...
...
below is the content from my app.js
angular.module('starter', [ 'ionic', 'ionic.service.core', 'starter.controllers', 'starter.services','ngResource'])
.run(function($ionicPlatform) {
Content from service.js
angular.module('starter.services', ['$resource']).factory('StockPickerService', function($http,$resource) {
// Might use a resource here that returns a JSON array
Am i missing anything ?
Inject ngResource in module starter.services, not $resource.
angular.module('starter.services', ['ngResource']).factory('StockPickerService', function($http,$resource) {
// Might use a resource here that returns a JSON array
ngResource is the module that provides the $resource service.
So
angular.module('starter.services', ['ngResource']).factory('StockPickerService', function($http,$resource) { }
should work

Error: [$injector:unpr] Unknown provider: chart.jsProvider

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);

routeProvider angularJS 1.3.x Error: $injector:modulerr

I am a bit issue with angularjs, this issue have taken many answer and but I can't resolve this issues in my case.
Here this is my import in html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-resource.min.js"></script>
App.js
angular.module('ngApp',['ngRoute'])
.config(['$routeProvider'],
function($routeProvider){ // Error here !
}).controller('ngAppHome',function ($scope){
$scope.title = "";
});
Error (in chrome)
Failed to instantiate module ngApp due to:
Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=fn&p1=not%2...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:6:417
at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:19:510)
at La (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:20:78)
at Function.bb.$$annotate (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:175:178)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:36:147)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:34:498)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:35:117
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:34:399
Thanks for your help
config() expects a single argument, not 2. Either it's the callback function itself, or it's an array containing provider names, followed by the callback function:
angular.module('ngApp',['ngRoute']).config(function($routeProvider){
...
})
or
angular.module('ngApp',['ngRoute']).config(['$routeProvider', function($routeProvider) {
...
}])
Given that your code won't resist to minification anyway, since you don't use the array syntax for your controller, I would use the first, simple one. Use ngAnnotate in your build to make your code minifiable.

Resources