RequireJS + Angular: Undefined app. Callback doesn't shoot

Question

I got main.js with this simple code:

'use strickt';

require.config({

  paths: {
    'angular'        : 'libs/angular'          ,
    'angular-router' : 'libs/angular-route'    ,
  },
  shim : {
    'angular' : {
      exports : 'angular'
    },
    'angular-router' : {
      deps: ['angular']
    }
  }

});

require(['app'], function (mainApp) {
  console.log(mainApp);
});

As you can see, I try to fetch app inside require callback. But all I got its undefined. Here what I got inside app.js file:

define('mainApp', ['angular', 'angular-route'], function (angular) {
  var app = angular.module('mainApp', ['ngRoute']);
  console.log('should be fired from app.js');
  return app;
});

So the question: Function argument 'mainApp' as undefined inside main.js callback seems logical because console.log() inside app.js doesnt shoot. Can somebody tell me what is wrong with it?

Answer 1

Just remove module name in app.js file (or change it to 'app'). You app.js file will look like:

define(['angular', 'angular-route'], function (angular) {
  var app = angular.module('mainApp', ['ngRoute']);
  console.log('should be fired from app.js');
  return app;
});

http://requirejs.org/docs/api.html#modulename

You can explicitly name modules yourself, but it makes the modules less portable -- if you move the file to another directory you will need to change the name. It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names. The optimization tool needs to add the names so that more than one module can be bundled in a file, to allow for faster loading in the browser.