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?
Related
I'm trying to start an app, however 2 things are causing errors
$locationProvider and $compileProvider in my config() function ? But can't seem to figure out why?
I'm running AngularJS v1.6.2.
The error I'm getting is this:
Uncaught Error: [$injector:modulerr] Failed to instantiate module zerochili due to:
Error: [$injector:unpr] Unknown provider: t
If I remove the config, the app runs without any problems...
The code:
import svg4everybody from 'svg4everybody';
import angular from 'angular';
import GlobalController from './Global/GlobalController';
let zeroChili = angular.module('zerochili', []);
zeroChili.config(function($locationProvider, $compileProvider) {
$locationProvider.html5Mode(true);
// this increases performance significant
$compileProvider.debugInfoEnabled(true);
// to run debug in production, run this in console:
// angular.reloadWithDebugInfo();
// see: https://docs.angularjs.org/guide/production
});
zeroChili.controller('GlobalController', GlobalController);
function runApp() {
angular.bootstrap(document, ['zerochili']);
}
runApp();
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 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'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'),
});
I created the modules and booted the app the document, I got the below errors. I can't figure out what is the problem with my module. Maybe I use the wrong way for module creation in angular.
Output
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.directives due to:
Error: [$injector:modulerr] Failed to instantiate module app.factories due to:
Error: [$in...<omitted>...1)
Modules
var app = angular.module('app', [
'app.templates',
'app.directives',
'app.services',
'app.factories',
]);
angular.module('app.templates', []);
angular.module('app.services', []);
angular.module('app.directives', [
'app.templates',
'app.factories'
]);
angular.module('app.factories', [
'toaster',
'ngStorage',
'app.services'
]);
angular.module('app.factories')
.factory('NotificationSvc',function($rootScope, AUTH_EVENTS, toaster){
...
});
$(function () {
angular.bootstrap(document ,['app']);
});