Develop Reference

AngularJS error module with minified scripts

I create my application using AngularJS. Lately, I tried to add minified scripts to project. I configured my bundles and add there scripts.
Unfortunately, after getting on my page, I saw error in console:
angularjs?v=DPp8dw32SOYLsCU70JJTuQ_I9tbCvN1g_Jgbcn9Mnx01:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=MyApp&p1=Error
... I read about problem with minified scripts from: http://frontendcollisionblog.com
but I did not found it in my project. Have you got any idea what can be wrong with it?
var MyApp = angular.module("MyApp", ["ui.bootstrap", "schemaForm"]);
MyApp.requires.push("ngFileUpload");
MyApp.config([
'$compileProvider', '$sceDelegateProvider', '$httpProvider',
function ($compileProvider, $sceDelegateProvider, $httpProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|sip|chrome-extension):/);
$sceDelegateProvider.resourceUrlWhitelist([
'self',
window.AppData.scriptsCdnEndpoint + '/**'
]);
$httpProvider.defaults.cache = true;
}
]);
`

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', [])

uncaught error in Angular when using $locationProvider

I am trying to get the path. So I have:
use strict';
angular.module('wixApp', [
'ngRoute',
'wix'
])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true).requireBase(false);
$routeProvider
.when('/', {
templateUrl: 'views/app.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
However, when I run this, I get uncaught error: $[injector:modulrr]
This only happens when I add $locationProvider in .config
here is the error in console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p0=wixApp&p1=TypeErro…2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.min.js%3A19%3A83)
Object

The error says that the module could not be instantiated which is mostly caused by some invalid module dependencies. Did you forget to add the angular-route javascript file to your build process (or as script tag in the index.html)?
For a correct setup please refer to the docs here: https://code.angularjs.org/1.4.12/docs/api/ngRoute
If you are using the non-minified version of angular during development, you will also get some better readable error messages.

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

AngularJSJ - Uncaught Error: [$injector:modulerr] (chrome console error)

I have done some research on the error I am getting but nothing has worked. The error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=MemberModule&p1=Re…%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2FMemberModule.js%3...<omitted>...5)
Here is my code:
index.jade:
doctype html
html(ng-app="MemberModule")
head
title= title
link(rel='stylesheet', href='/javascripts/vendor/bootstrap-css/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js")
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js')
script(type='text/javascript', src='/javascripts/vendor/angular-bootstrap/ui-bootstrap-tpls.js')
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
script(type='text/javascript', src='/javascripts/MemberModule.js')
#heady
block head
body
block content
As you can see - I think I am loading all the scripts in the correct order.
MemberModule.js:
var MemberModule = angular.module('MemberModule', ['ui.bootstrap', 'ngRoute']);
MemberModule.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/member/:id.json', {
templateUrl: '/templates/home.jade',
controller: MemberListCtrl
});
});
MemberModule.controller('MemberListCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
$scope.id = $routeParams.id;
}
]);
I'm guessing its something in MemberModule.js. Thanks in advance.
UPDATE
This is what firefox console says - a little more info, looks like something isn't defined:
[12:34:55.413] Error: [$injector:modulerr] http://errors.angularjs.org/1.2.15/$injector/modulerr?p0=MemberModule&p1=MemberListCtrl%20is%20not%20defined%0A%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2FMemberModule.js%3A9%0Ad%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A33%0Ae%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A32%0Ar%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A7%0Ae%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A32%0AZb%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A35%0AYb%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A17%0AYb%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A18%0AUc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A17%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A206%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A138%0Aie%2Fc%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A30%0Ar%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A7%0Aie%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.15%2Fangular.min.js%3A30%0A # https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6
UPDATE
Instead of using Google CDN, I downloaded the scripts and put them in the site directory - no more dependency errors - but I do have an error that I'm not sure of (if anyone can help):
[12:42:14.899] ReferenceError: MemberListCtrl is not defined # http://localhost:3000/javascripts/MemberModule.js:9
I updated my MemberModule.js to reflect what it looks like now.

The reason you're getting an undefined error is because it's not defined within the scope of the function trying to use it. Just because you registered an object with that name with Angular doesn't mean that the config function has it. You will need to either inject that controller or specify the controller in the template (my personal preference).