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']);
});
Related
I am trying to add validation to ui.grid.
I injected 'ui.grid.edit', 'ui.grid.validate' to my module. still it's throwing the error.
Error: [$injector:modulerr] Failed to instantiate module ui.grid.validate due to:
ReferenceError: isUndefined is not defined
Below is my code:
var milesApp = angular.module("milesApp", [ "ui.grid", 'ui.grid.edit', 'ui.gird.validate', 'ngStorage', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.selection', 'ui.grid.pinning', 'ngJsonExportExcel', "ngProgress", '720kb.datepicker', 'ngDialog']);
You have made a misprint in a dependency name. It should be ui.grid.validate.
var milesApp = angular.module("milesApp", [ "ui.grid", 'ui.grid.edit', 'ui.gird.validate', 'ngStorage', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.selection', 'ui.grid.pinning', 'ngJsonExportExcel', "ngProgress", '720kb.datepicker', 'ngDialog']);
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?
Trying to get up and running with webpack for angularjs. Trying to setup different angular modules for each folder within /webpack & then inject them into my main app module definition. What am I doing wrong?
Running into this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module webpack due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"photocropper"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
entrypoint:
var angular = require('angular');
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')
])
./webpack/photocrop/client/index.js
var angular = require('angular');
module.exports = angular.module('photocropper', [])
Remember that you need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client') //this is an object
])
You can simply require the file and just inject by name like this:
var firstModule = require('./webpack/photocrop/client')
ngModule = angular.module('webpack', [
'firstModule' // this should work
])
firstModule(ngModule)
I had the same problem and in my case it got solved by changing the assigment in:
var angular = require('angular');
To simply:
require('angular');
The reason is that this assigment is creating a new "angular" variable which is different than the one provided by Angular itself, hence, it doesn't have the 'module' property
I am trying to build Elasticsearch Angular app. I am using require.js.
main.js
require.config({
paths : {
'angular' : '../bower_components/angular/angular',
'elasticsearch' : '../node_modules/elasticsearch/src/elasticsearch.angular',
'app' : 'app',
'coreModule':'coreModule',
'esClient' : 'service/esClient'
},
shim : {
'app':{
'deps' : ['angular','coreModule']
},
'coreModule' : {
'deps' :['angular', 'elasticsearch','esClient']
},
'esClient' : {
'deps' :['angular', 'elasticsearch']
}
}
});
require(['app'], function(){
angular.bootstrap(document, ['app']);
});
esClient.js
define(function(){
var esClient=angular.module('esClient', ['elasticsearch']);
esClient.service('client', function (esFactory) {
return esFactory({
host: 'http://localhost:9200',
apiVersion: '1.5',
log: 'trace'
});
});
});
But it is throwing the following errors. Anyone else faced this issue?
Uncaught Error: Module name "lib/connectors/angular" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
makeError # require.js:166
localRequire # require.js:1407
requirejs # require.js:1752
(anonymous function) # elasticsearch.angular.js:7
coreModule.js:3 coreModule module
app.js:4 App module
angular.js:63 Uncaught Error: [$injector:modulerr] Failed to instantiate module
app due to:
Error: [$injector:modulerr] Failed to instantiate module coreModule due to:
Error: [$injector:modulerr] Failed to instantiate module esClient due to:
Error: [$injector:modulerr] Failed to instantiate module elasticsearch due to:
Error: [$injector:nomod] Module 'elasticsearch' 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.