Failed to instantiate module, AngularJS - javascript

Im trying to use angular-file-upload, https://github.com/danialfarid/angular-file-upload.
When I try to Instantiate the module, angularFileModule, I get the following error:
Error: [$injector:modulerr] Failed to instantiate module cryptlib due to: [$injector:modulerr] Failed to instantiate module angularFileUpload due to: [$injector:nomod] Module 'angularFileUpload' 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.
I'm trying to Instantiate it in my app.js file:
var gameApp = angular.module("cryptlib", [
'ngRoute',
'ngSanitize',
'cryptlib_controllers',
'cryptlib_directives',
'cryptlib_services',
'angularFileUpload'
]);
angular.module('cryptlib_controllers', []);
angular.module('cryptlib_directives', []);
angular.module('cryptlib_services', []);
gameApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/firstpage.html',
controller : 'firstPageController'
})
.when('/game', {
templateUrl : 'partials/uploadBook.html',
controller : 'uploadBookController'
});
});
I have no Idea why this wont work. Can anyone help me?

Related

Error when trying to load require module

I've been trying to understand how to set up Stripe for my app but am having problems with the implementation of the module. Normally when using a module i would require it in the top of the file to be able to use it but when i do it in the paymentCtrl file it doesn't work and i get the two errors below: where am i supposed to declare it for me to be able to use it? Well as you see i'm quite new to this and would like to understand how to structure this so that the payments work.
errors:
Unexpected token.
and
Failed to instantiate module paymentController due to:
Error: [$injector:nomod] Module 'paymentController' 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.
paymentCtrl:
angular.module('paymentController', [])
var stripe = require('stripe')('sk_test_....');
.controller('paymentCtrl', function($scope) {
});
app.js:
angular.module('userApp', ['appRoutes', 'userControllers', 'userServices', 'ngAnimate', 'mainController', 'authServices', 'managementController', 'paymentController'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptors');
});
try to move line:
var stripe = require('stripe')('sk_test_....');
above line:
angular.module('paymentController', [])

Using ngRoute with AngularJS Errors

I'm creating an app using Meteor as my framework and AngularJS on the front end. I've been stuck on attempting to figure out how to route my website. What I was planning of doing is breaking up my HTML into separate files so its easier to make changes in the future and its also organized.
This is my JS file :
var myApp = angular.module('CalorieCounter',['angular-meteor']);
angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'formCtrl'
});
});
The error I'm receiving is the following :
angular_angular.js?hash=08f63d2…:83 Uncaught Error: [$injector:modulerr]
Failed to instantiate module CalorieCounter due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
Not sure why exactly I'm receiving this error...I literally followed a tutorial that I found online. Please advise. Anyone. Been stuck on this for the past 4 hours :(
UPDATE #1
After, following what everyone suggested, now I'm getting the following error:
angular_angular.js?hash=08f63d2…:83 Uncaught Error: [$injector:modulerr]
Failed to instantiate module CalorieCounter due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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
I don't understand why I'm getting this error, when I just checked up with the AngularJS Docs : https://docs.angularjs.org/api/ngRoute
UPDATE #2
I figured out what was wrong and do not have the error reported in Update #1. What I'm confused about now is the following :
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'formCtrl'
})
.when('/register', {
templateUrl : 'public/register.html'
});
});
When I try to go to : localhost:3000/register it just refreshes the home page and stays there. Another question, in my HTML files, how do I redirect my button to the specified HTML file? Is that just regular HTML convention or is there a specific way of doing it in terms of AngularJS?
you're creating 2 angular modules. It's confusing because the CalorieCounter module is called 'myApp', and the 'myApp' module is not assigned to any var. To use the CalorieCounter module within the myApp module, add it as a dependency:
var calorieCounterApp = angular.module('CalorieCounter',['angular-meteor']);
var myApp = angular.module('myApp', ['ngRoute', 'calorieCounterApp']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'formCtrl'
});
});
The thing is that you're declaring ngRoute on the module myApp, but the module you're referring to through the myApp variable is CalorieCounter
If you change it to this it should work:
var myApp = angular.module('CalorieCounter',['angular-meteor', 'ngRoute']);
I don't know about ngRoute but you can use angularui:angular-ui-router (github) package to route your website like this (Code from the example in documentation),
var myApp = angular.module('myApp', [
'angular-meteor',
'ui.router'
]);
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
});
Change to this:
var myApp = angular.module('CalorieCounter',['angular-meteor','ngRoute']);

angular module not available even though it's defined

When I try to run the code below I get two errors that say
Error: [$injector:nomod] Module 'rooms' 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.
Error: [$injector:modulerr] Failed to instantiate
module app due to: [$injector:nomod] Module 'app' 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.
I can see that I haven't misspelled the the name of the module anywhere and I have included the dependencies for the necessary modules and I have structured the modules in the necessary order so that none of the modules are undefined for each other(as in rooms.controllers module exists before it's injected and rooms module exists before it's injected into the app module
(function(){
'use strict';
//create the module that is going to contain the controllers for the rooms module
angular.module('rooms.controllers', [])
.controller('RoomCtrl', RoomCtrl);
function RoomCtrl(){
var vm = this;
vm.rooms = [];
};
})();
(function(){
'use strict';
//create the rooms module and inject rooms.controllers module and ngRoute module
angular
.module('rooms', ['rooms.controllers', 'ngRoute']);
});
(function(){
'use strict';
//get the rooms module and config it's routes, because we're getting it we don't need []
angular
.module('rooms')
.config(function($routeProvider){
$routeProvider
.when('/rooms',{
templateUrl:'public/modules/rooms/templates/roomlist.html',
controller: 'RoomCtrl',
controllerAs: 'room'
})
})
})();
(function(){
'use strict';
//bootstrap the whole thing together
angular.module('app', ['rooms']);
})();
This code block is not executed.
(function(){
'use strict';
//create the rooms module and inject rooms.controllers module and ngRoute module
angular.module('rooms', ['rooms.controllers', 'ngRoute']);
})(); // <-- here

Uncaught Error: [$injector:modulerr] Failed to instantiate module polmgr due to

Error in Chrome Developers Tool
Uncaught Error: [$injector:modulerr] Failed to instantiate module polmgr due to:
Error: [$injector:modulerr] Failed to instantiate module polmgr.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module $http due to:
Error: [$injector:nomod] Module '$http' 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.
This error is coming when i add $http to my module in ionicframework.
I am noob.
I have added the $http in controllers.js file and if i remove everything works fine. but i need to make a http get call.
Find the controllers.js code below :-
angular.module('polmgr.controllers', ['$http'])
.controller('PolicyCtrl', function($scope, $http, $stateParams) {
});
Correct Code:-
angular.module('polmgr.controllers', [])
.controller('PolicyCtrl', function($scope, $http, $stateParams) {
});
From the looks of things you are trying to inject the $http service incorrectly.
It is part of the core ng module that angular.js/angular.min.js provides.
So you don't need to add it as a module dependency like this:
var ctrlModule = angular.module('polmgr.controllers', [..., '$http', ...])
Instead, just inject it into your controller functions like you would do for $scope:
.controller('PolicyCtrl', function($scope, $http, $stateParams) {
});

Module 'ngMockE2E' is not available! AngularJS

Getting the following error in my browser:
Uncaught Error: [$injector:modulerr] Failed to instantiate module sayHiApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngMockE2E due to:
Error: [$injector:nomod] Module 'ngMockE2E' 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.2.15/$injector/nomod?p0=ngMockE2E
at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
at http://127.0.0.1:9000/bower_components/angular/angular.js:1611:17
at ensure (http://127.0.0.1:9000/bower_components/angular/angular.js:1535:38)
at module (http://127.0.0.1:9000/bower_components/angular/angular.js:1609:14)
at http://127.0.0.1:9000/bower_components/angular/angular.js:3717:22
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://127.0.0.1:9000/bower_components/angular/angular.js:3711:5)
at http://127.0.0.1:9000/bower_components/angular/angular.js:3718:40
at Array.forEach (native)
http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=ngMockE2E&p1=Error…ngular%2Fangular.js%3A3718%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
at http://127.0.0.1:9000/bower_components/angular/angular.js:3745:15
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://127.0.0.1:9000/bower_components/angular/angular.js:3711:5)
at http://127.0.0.1:9000/bower_components/angular/angular.js:3718:40
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:323:11)
at loadModules (http://127.0.0.1:9000/bower_components/angular/angular.js:3711:5)
at createInjector (http://127.0.0.1:9000/bower_components/angular/angular.js:3651:11)
http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=sayHiApp&p1=Error%…F%2F127.0.0.1%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A3651%3A11) angular.js:78
My app.js looks like this:
'use strict';
angular
.module('sayHiApp', [
'ngCookies',
'ngMockE2E',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.run(function($httpBackend) {
var name = '';
$httpBackend.whenPOST('/name').respond(function(method, url, data) {
name = angular.fromJson(data);
return [200, name, {}];
});
$httpBackend.whenGET('/name').respond(name);
});
Am I missing something?
The angular.mocks.js file consists of a number of modules helpful in mocking and testing. The most used ones are ngMock, ngMockE2E which provide the mocks for some of the most used components such as $timeout, $rootScope, $controller, $httpBackend ($httpBackend is part of ngMockE2E).
In order to use any of these modules as dependecy you need to load angular.mocks.js. Just add this script in your html file to remove the [$injector:modulerr] which is an error caused when the module added as dependency is not found or its file has not been loaded
I only add to use $httpBackend, so only 'ngMocksE2E' module was necessary, so I did:
import angular from 'angular';
// it exports moduleName that is 'ngMockE2E'
import ngMockE2EModuleName from 'angular-mocks/ngMocksE2E.js';
export default angular.module('app', [ngMockE2EModuleName]);

Categories

Resources