Develop Reference

Using requireJS with angular; Cannot read property 'module' of undefined

Ok, there is a bunch of questions with similar titles, but none of them helped me solve my problem so here it is.
I am trying to use Angular with RequireJS; I am getting the error message Uncaught TypeError: Cannot read property 'module' of undefined which is referring to the angular object within the angular-routes.js file. This suggests to me that requireJS is trying to load angular-routes before angular has loaded. I was under the impression that this wouldn't happen because I have set 'angular-route' as dependant on 'angular' within the shim. Can anyone spot what I am doing wrong here?
// Setup requireJS
require.config({
baseUrl : "scripts",
packages : [
{ "name":"angular", "location":"../bower_components/angular", "main":"angular"},
{ "name":"angular-route", "location":"../bower_components/angular-route", "main":"angular-route"},
{ "name":"angular-animate", "location":"../bower_components/angular-animate", "main":"angular-animate"},
{ "name":"angular-storage", "location":"../bower_components/angular-storage/dist", "main":"angular-storage"},
{ "name":"jquery", "location":"../bower_components/jquery/dist", "main":"jquery"}
],
shim:{
'angular' : { exports : 'angular', deps : ['jquery'] },
'angular-route' : { deps : ['angular'] },
'angular-animate' : { deps : ['angular'] },
'angular-storage' : { deps : ['angular'] },
}
});
// Load app files
function loadApp($, app)
{
angular.element(document).ready(function(){
angular.bootstrap(document, ['mealPlannerApp']);
});
}
requirejs(['app'], loadApp);
My app.js file is as follows
(function() {
// Declare AMD module with dependencies
define(['angular', 'angular-route', 'routes'],
function(config)
{
var app = angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']);
app.config(config);
});
}());

Packages are great for your internal packages, I haven’t tried to load main AngularJS files as them.
Please read http://jonathancreamer.com/require-js-packages-for-building-large-scale-angular-applications/ for some better clarification and examples than change config section to something like this. Major change is replacement of packages with paths
Please also consider to change variables to camelCase style
require.config({
paths: {
angular: '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',
'angular-animate': '../bower_components/angular-route/angular-animate',
'angular-storage': '../bower_components/angular-route/angular-storage'
},
shim: {
'angular' : { exports : 'angular', deps : ['jquery'] },
'angular-route' : { deps : ['angular'] },
'angular-animate' : { deps : ['angular'] },
'angular-storage' : { deps : ['angular'] },
},
priority: [
"angular"
]
});

r.js optmiser: $ not defined

I'm trying to use the r.js optimiser for the first time.
My main file looks like this:
/*--- Require.js: the main module loader ---*/
require.config({
baseUrl: 'assets/js',
waitSeconds: 0,
paths : {
jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
jqueryui : '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min',
underscore : 'vendor/underscore/underscore-min',
backbone : 'vendor/backbone/backbone',
routefilter : 'vendor/backbone.routefilter/backbone.routefilter',
marionette : 'vendor/marionette/marionette',
tpl : 'vendor/require/tpl',
async : 'vendor/async/async',
require_async : 'vendor/require/require_async',
modernizr : 'vendor/modernizr/modernizr.custom.15872',
hello : 'vendor/hello/hello',
facebook : 'vendor/hello/facebook',
google : 'vendor/hello/google',
moment : 'vendor/moment/moment',
$dropdown : 'vendor/jquery.dropdown/jquery.dropdown',
spin : 'vendor/spin/spin',
selectBoxIt : 'vendor/selectBoxIt/selectBoxIt',
maskedinput : 'vendor/maskedinput/maskedinput',
multidatespicker : 'vendor/multidatespicker/jquery-ui.multidatespicker'
//markerclusterer : 'vendor/markerclusterer/markerclusterer'
},
shim : {
underscore: {
exports: '_'
},
backbone: {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
marionette: {
deps : ['jquery', 'underscore', 'backbone'],
exports : 'Marionette'
},
routefilter: {
deps : ['marionette', 'backbone', 'underscore', 'jquery'],
exports : 'Routefilter'
},
selectBoxIt: {
deps : ['jquery', 'jqueryui'],
exports : 'SelectBoxIt'
},
multidatespicker: {
deps : ['jquery', 'jqueryui'],
exports : 'MultidatesPicker'
},
facebook: {
deps : ['hello'],
exports : 'Facebook'
},
google: {
deps : ['hello'],
exports : 'Google'
}
//markerclusterer: {
// exports : 'Markerclusterer'
//}
},
config: {
moment: {
noGlobal: true
}
}
});
//--- Define Google maps to make it globally accessible throughout the application ---//
define('gmaps', ['require_async!https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry,places&key=AIzaSyDRKg-SNBODA1mKMCRrfMrls48x7owr9w8&sensor=true"'],
function(){
// return the gmaps namespace for brevity
return window.google.maps;
});
//--- Define moment ---
require(["moment"], function (moment) {
moment().format();
});
// --- Initialize the application ---//
require([
'zwoop', 'backbone'
], function(Zwoop, Backbone){
Zwoop.start();
});
The build file contains the following settings:
mainConfigFile:"js/main.js",
baseUrl : "js",
name: "main",
out: "dist/main.js",
removeCombined: true,
findNestedDependencies: false,
paths: {
jquery: "empty:"
}
I don't receive any errors, but unfortunately I receive an error in the browser:
Uncaught ReferenceError: $ is not defined
It appears that either jquery is not properly loaded from the CDN, or that something is not working correctly regarding the shim.
Can you spot what the error might be?

How to load JSON.js library with Require JS in order to make a Backbone app work in IE7?

I have managed to make my Backbone app work with IE8 - IE Edge... Yey:)
The last stone is IE7 - I get the following Backbone error:
'JSON' is undefined - file: backbone.js
And there is some part of the backbone library code highlighted by IE's console:
s.data=JSON.stringify(i.attrs||e.toJSON(i)
From what I read, I have to load JSON2 or JSON3 library because IE7 does not have it.
Ok, googled and go the following library - JSON 3:
http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js
Now, I use require js to load my application, and I have no idea how to integrate this with my app config.
What are it's dependencies, what does it export?
Here is my config for require js:
/**
* Config.
*/
require.config({
paths: {
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
shim: {
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text : {
exports : 'text'
}
},
global : {
deps: ["jquery"],
exports : 'Global'
}
});
require([
'jquery',
'underscore',
'backbone',
'router',
'global'
], function ($, _, Backbone, Router) {
// Compatibility override, add a close function for the Backbone views.
var router = new Router();
Backbone.history.start();
});
Any ideas?

First add the json library to your path config:
paths: {
"json": "http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js",
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
The json library has no dependencies and exports a global variable JSON. You will need to make the backbone library depend on the json library, and load the JSON library with a shim config. See below:
shim: {
json: {
exports: 'JSON'
},
backbone: {
deps: ["underscore", "jquery", "json"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text: {
exports: 'text'
}
}

Correct way to set up Marionette Js with core AMD build?

I am learning Marionett on the side, and am trying to stick to the core amd build and not shim marionett. here's my require config:
require.config({
paths : {
backbone : 'lib/backbone',
underscore : 'lib/underscore',
jquery : 'lib/jquery',
marionette : 'lib/backbone.marionette',
'backbone.wreqr' : 'lib/backbone.wreqr',
'backbone.babysitter' : 'lib/backbone.babysitter',
hbs : 'lib/hbs',
Handlebars : 'lib/Handlebars'
},
shim : {
jquery : {
exports : 'jQuery'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
}
},
hbs: {
disableI18n: true,
disableHelpers: true
}
});
I am getting Backbone is undefined in the application module of marionette when I create an application module as follows:
define(["marionette", "views/CatCompositeView"], function (Marionette, CatCompositeView) {
var app = new Marionette.Application();
app.addRegions({
mainRegion: '#content'
});
app.addInitializer(function(options){
var catCompositeView = new CatCompositeView({
collection: options.cats
});
app.mainRegion.show(catCompositeView);
});
return app;
});
Any ideas? I am able to get it all working when shimming marionette so I'm ok for now, but would like to load it all individually.
UPDATE: Here's how I ended up doing this in my require config:
require.config({
paths : {
backbone : 'lib/backbone',
underscore : 'lib/underscore',
jquery : 'lib/jquery',
marionette : 'lib/backbone.marionette',
'backbone.wreqr' : 'lib/backbone.wreqr',
'backbone.babysitter' : 'lib/backbone.babysitter',
hbs : 'lib/hbs',
Handlebars : 'lib/Handlebars'
},
shim : {
jquery : {
exports : 'jQuery'
},
underscore : {
exports : '_'
},
backbone : {
deps : ['jquery', 'underscore'],
exports : 'Backbone'
},
'backbone.wreqr': {
deps : ['backbone']
},
'backbone.babysitter': {
deps : ['backbone']
}
},
hbs: {
disableI18n: true,
disableHelpers: true
}
});

You need to shim Backbone.Marionnette too:
marionette : {
deps: ["backbone", "underscore"],
exports: "Backbone.Marionette"
}

See update above. I needed to add backbone as a dependency for wreqr and babysitter to load them individually.

How to mixin Underscore plugins in RequireJS?

What is the right way to execute code on Underscore when it gets loaded? I am trying to execute the below code to extend the _ exported namespace automatically when modules require it:
_.mixin(_.str.exports());
The docs are a bit vague but I think I put it in the shim init section? I tried the below but I can't even get a breakpoint to hit in the init:
require.config({
paths: {
jquery: 'libs/jquery/jquery.min',
underscore: 'libs/underscore/lodash.min',
underscorestring: 'libs/underscore/underscore.string.min'
},
shim: {
underscore: {
exports: '_'
}
underscorestring: {
deps: ['underscore'],
init: function (_) {
//Mixin plugin to namespace
_.mixin(_.str.exports());
return _;
}
}
}
});
When I try to do this and use underscorestring, I get this error:
Uncaught TypeError: Object function s(e){return new o(e)} has no
method 'startsWith'
Docs:
http://requirejs.org/docs/api.html#config-shim
http://requirejs.org/docs/api.html#config-callback

I don't know if it's the correct way, but I got it working by inverting things so that underscore depends on underscore.string. Also, this way you don't have to require underscore.string.
require.config({
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
deps: ['underscore.string'],
exports: '_',
init: function(UnderscoreString) {
_.mixin(UnderscoreString);
}
}
},
paths: {
'backbone' : 'lib/backbone',
'jquery' : 'lib/jquery/jquery',
'text' : 'lib/require/text',
'underscore' : 'lib/underscore',
'underscore.string' : 'lib/underscore.string'
}
});
.
Update: 3/14/2014
Underscore.js v1.6.0 brought back AMD compatibility and init() has been removed from RequireJS, so some refactoring is in order. To continue getting Underscore preloaded with Underscore.string I made a mixer module to pull them together.
New Require.js config
requirejs.config({
paths: {
'backbone' : '../lib/backbone/backbone',
'backbone.base' : '../lib/backbone/backbone.base',
'backbone.extensions' : '../lib/backbone/backbone.extensions',
'jquery' : '../lib/jquery/jquery',
'text' : '../lib/require/text',
'underscore' : '../lib/underscore/underscore',
'underscore.mixed' : '../lib/underscore/underscore.mixed',
'underscore.string' : '../lib/underscore/underscore.string'
},
shim: {
'backbone.base': {
deps: ['underscore.mixed', 'jquery'],
exports: 'Backbone'
},
}
});
underscore.mixed
define([
'underscore',
'underscore.string'
], function(_, _s) {
_.mixin(_s.exports());
return _;
});
The final step is to replace all instances of 'underscore' with 'underscore.mixed' in module definitions. I attempted moving Underscore into a file named underscore.base.js and making the regular underscore the mixer (like the Backbone setup) to avoid this step. Underscore, being a named module, disagreed with the plan.

Do you require underscorestring somewhere? Because if it isn't required, it won't be loaded.
I managed to get it working with almost exactly the same code you posted:
require.config({
paths: {
underscore: [
'//raw.github.com/documentcloud/underscore/master/underscore-min'
, 'lib/underscore'
]
, underscorestring: 'https://raw.github.com/epeli/underscore.string/master/dist/underscore.string.min'
}
, shim: {
underscore: { exports: '_' },
underscorestring: {
deps: ['underscore'],
init: function(_) {
_.mixin(_.str.exports());
return _; // guess, this is not needed.
}
}
}
, exclude: ['underscore']
});
require(['underscore', 'underscorestring'], function(_) {
console.log( _.chars("i'm a happy string.") );
});

Battling with this for hours before i understand what i was doing wrong
This is what i did wrong
You should not rename the file underscore.string in main.js
even though in my library i did rename the file in paths i name it back to 'underscore.string'
This is how your main.js should look like
require.config({
paths: {
underscore: 'lib/underscore',
'underscore.string' : 'lib/_string' ,
},
shim: {
underscore: {
exports: '_',
deps: [ 'jquery', 'jqueryui' ]
},
'underscore.string': {
deps: [ 'underscore' ]
},
}
....
You could then either add it as dependency with in your shim like i did for my mixin file
shim: {
mixin : {
deps: [ 'jquery', 'underscore', 'underscore.string' , 'bootstrap' ]
},
Or just define it in your different pages like
/*global define */
define([
'underscore.string'
], function ( ) {
it just work now you can access it through _.str or _.string
This is why you should do it this way and not try to name it something else
on line 663 of underscore.string.js
// Register as a named module with AMD.
if (typeof define === 'function' && define.amd)
define('underscore.string', [], function(){ return _s; });
Which means that it will only register it with AMD require JS if you are defining 'underscore.string'
For Mix in you could just with define
/*global define */
define([
'underscore',
'underscore.string'
], function ( ) {
_.mixin(_.str.exports());