I'm implementing Global Error Handling inside an Ionic application. I want to receive an IonicPopup telling me that an error occurred. For the errorExceptionHandler I created a new config based on an existing solution that holds an alert as Global Error Handling.
angular
.module('MyApp', ['ionic'])
.config(function ($provide, $ionicPopup) {
$provide.decorator('$exceptionHandler', ['$delegate', function ($delegate) {
return function (exception, cause) {
$delegate(exception, cause);
//Alert works fine
alert(exception.message);
//$ionicPopup will follow here
};
}]);
})
This immediately resulted into the following error.
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module app due to: Error: [$injector:unpr] Unknown
provider: $ionicPopup
What am I missing here?
Why are you injecting $ionicPopup inside a config function when you have to inject it in a controller/factory/service
http://ionicframework.com/docs/api/service/$ionicPopup/
config function accepts providers, you can inject only a provider,if at all you need it... you could do something like below.
angular.module('myApp').config(function () {
var injector = angular.injector(['ng']),
ionicPopup= injector.get('$ionicPopup'),
});
Related
I am working on an project and need to modify some code to resolve an error
Filter:
(function () {
'use strict';
angular.module('myApp').filter('filter1', ['$filter', firstFilter]);
angular.module('myApp').filter('filter2', ['$filter', secondFilter]);
function firstFilter($filter) {
return function (element) {
//code
};
}
function secondFilter($filter) {
return function (element) {
//code
};
}
})();
This only appears to happen with the minified version.
It look a lot like Angular directive throws Error: [$injector:unpr] but the code is already injecting $filter.
What do i miss in this situation.
I added your code in a plunker (all console errors fixed) and I think you could be getting [$injector:nomod] instead.
It occurs when you don't specify angular.module('myApp', []) the emtpy array describing dependencies. Check for that. To retrieve a reference to the same module for further configuration, you can call angular.module without the array argument.
Also, you have a typo in firstFilter function declaration which was misspelled as firtstFilter
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
I'm trying to inject two providers and I have an error:
Error: [$injector:modulerr] Failed to instantiate module App due to:
[$injector:unpr] Unknown provider: $paginationTemplateProvider
Here's my code:
var app = angular.module('App', ['angular-loading-bar', 'angularUtils.directives.dirPagination'])
.config(function ($paginationTemplateProvider, $cfpLoadingBarProvider) {
$paginationTemplateProvider.setPath('../lib/angular-utils-pagination/dirpagination.tpl.html');
$cfpLoadingBarProvider.includeSpinner = false;
});
Do you have any idea what is wrong?
I wanted to rewrite my existing code, but I failed as I run into this error:
ionic.bundle.js:8900 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.routes due to:
Error: [$injector:unpr] Unknown provider:
My working snippet:
angular.module('app.routes', [])
.config(function() {});
My rewritten snippet (this one fails):
(function () {
// use strict mode to write clean code!
'use strict';
// This configures the routes
var RouteProvider = function () {
};
// init the config
angular.module('app.routes', [])
.config(['', RouteProvider]);
}());
I have created a Plunker for this: Plunker
Thanks for your help ;)
You have an empty string into your .config call - this is effectively telling Angular you want to inject a service with a blank string as the name into your config function. This doesn't exist, so you get an unknown provider error - a pretty unclear one at that, because it tries to show you the name of the service, but it's blank, so you just end up with Error: [$injector:unpr] Unknown provider: and nothing else!
Your .config call should look more like this:
// init the config
angular.module('app.routes', [])
.config(RouteProvider);
You don't need the array syntax if you're not actually injecting anything into the function.
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);