Why my AngularJS + RequireJS application is not building via grunt-contrib-requirejs?

Question

I have src of my application. I use AngularJS. I use RequireJS as module loader. I use Grunt as task runner. When I run application using src: everything is good. When I build application with Grunt, application is not working. I got no errors in console.

Main thing I noticed: my code (code of my application: app.js and files under js/) does not appear in output file which is set in grunt task settings. Also, I don't think there is something about AngularJS.

Main config file:

require.config({
  paths: {
    'angular' : '../components/angular/angular',
    /* etc..... */
    'jquery': '../components/jquery/dist/jquery',
    'application': './app'
  },
  shim: {
    /* etc */
    application: {
      deps: ['angular']
    },
    angular: {
      exports : 'angular'
    }
  },
  baseUrl: '/js'
});

require(['application', 'angular', 'ngRoute', 'bootstrap' /* ngRoute and bootstrap from etc :) */], function (app) {
  app.init();
});

My app in app.js is:

define([
  'require', 'angular', 'main/main', 'common/common'
], function (require) {
  'use strict';
  var angular = require('angular');
  var app = angular.module('myApp', ['ngRoute', 'main', 'common']);
  app.init = function () {
    angular.bootstrap(document, ['myApp']);
  };
  app.config(['$routeProvider',
    function ($routeProvider) {
      $routeProvider
        ./* ... some code */

    }
  ]);

  return app;
});

I add main RequireJS config file at the end of body tag:

<script type="text/javascript" src="components/requirejs/require.js" data-main="js/bootstrap.js"></script>

Now I have problem. I have Grunt as build system. I have this task:

grunt.initConfig({
  requirejs: {
    compile: {
      options: {
        baseUrl: "public/js",
        mainConfigFile: "public/js/bootstrap.js",
        name: 'bootstrap',
        out: "build/js/bootstrap.js",
        optimize: 'none'
      }
    }
  },
  // etc

I have no optimisation, so I get ~11k lines of code in output file.

As I said. Main problem is: no AngularJS code and no application code in output file.

Why? I set up mainConfigFile correctly. Problem is in RequireJS config file? But everything is okay, when I am running my app on src.

Answer 1

It would be better if you can provide the exactly error output you get. And where you got it (from browser's console or from terminal during build process)

For now I will suggest some adjustments what could possibly help with your case.

angular: {
    exports : 'angular'
}

Here you have already export angular.js into global local variable (inside every require and define block).

And by doing var angular = require('angular'); you are possibly asynchronously override angular variable inside your app.js module.

For 'require' being added into define block, as r.js always reading what module got to be loaded in very first step, and then merged into single file. And this may confuse r.js to merging requireJS into itself.

Suggest this adjustment for your app.js:

define([ // Removed 'require' because no needed , it is already global and usable anywhere
  'angular', 'main/main', 'common/common'
], function () {
  'use strict';
  // var angular = require('angular'); // This is a very common mistake. You are not going to call angular this way, requireJS difference with commonJS. 
  var app = angular.module('myApp', ['ngRoute', 'main', 'common']);
  app.init = function () {
    angular.bootstrap(document, ['myApp']);
  };
  app.config(['$routeProvider',
    function ($routeProvider) {
      $routeProvider
        ./* ... some code */

    }
  ]);

  return app;
});

And last but not least data-main="js/bootstrap.js" I think it should be js/main.js or a typo.

EDIT added explanations for 'require' in define block, and angular local variable.