r.js optimization causes app to no longer work

[andrewboni]

Did a fair amount of Googling on this, but to no avail.

My app works fine using require.js- views render properly, scripts & dependencies get loaded, etc. But when I use the r.js optimizer to concatenate and minify everything into a single file, it no longer works, and I can't seem to figure out why.

Here are my build options (using Grunt):

    requirejs:
      compile:
        options:
          baseUrl                 : './public'                      # The dir that everything is under
          mainConfigFile          : 'public/javascripts/app/main.js'         # Path to the require config
          name                    : 'app'                    # Name of the module we want to optimize
          out                     : 'public/javascripts/app/myapp.js'
          optimize                : 'none'     

You'll notice that I'm simply concatenating all scripts here- no minification.

The built file, myapp.js, appears to be generated correctly, as it appears to contain all of my necessary js scripts and libs.

Everything is loaded correctly:

myapp.js looks like this, with many, many libraries in it:

/*
 AngularJS v1.2.27
 (c) 2010-2014 Google, Inc. http://angularjs.org
 License: MIT
*/
(function(W,X,u){function z(b){return f
...
//# sourceMappingURL=angular.min.js.map
;
define("angular", (function (global) {
    return function () {
        var ret, fn;
        return ret || global.angular;
    };
}(this)));

/*! jQuery v2.1.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
!function(a,b){"object"==typeof 
...
//# sourceMappingURL=jquery.min.map;
//     Underscore.js 1.5.2
//     http://underscorejs.org
//     (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
//     Underscore may be freely distributed under the MIT license.
(function(){var n=this,t
...
//@ sourceMappingURL=underscore-min.map;
//! moment.js
//! version : 2.7.0
//! authors : Tim Wood, Iskren Chernev, Moment.js contributors
//! license : MIT
//! momentjs.com
(function(
...

As for my main.js file, I'm fairly certain it's set up correctly, as it works if I don't try to use the optimizer.

Can someone point me in the right direction? Banging my head over here. Thanks!

[andrewboni]

Well, I was finally able to resolve the issue. For those of you in the same boat, here is what was happening:

I'm using require.js in conjunction with AngularJS. Because of this, you need to manually bootstrap the app yourself. I had my angular.bootstrap() call inside of my main.js file (with all of my require.js configurations), like so:

require.config
  baseUrl: '/assets'
  config:
    moment:
      noGlobal: true
  paths:
    # Vendor libs
    # Make sure that these stay in sync

    jquery                  : "lib/jquery/dist/jquery.min"
    underscore              : "lib/underscore-amd/underscore-min"

    ####
    # Core angular libs
    ####
    angular                 : "lib/angular/angular.min"
    ....

  shim:
    jQuery:
      exports: '$'
    underscore:
      exports: '_'
    moment:
      exports: 'moment'
    angular:
      exports: 'angular'
    ...

require ['app', 'angular'], (app, angular) ->
  # Must manually bootstrap our app
  # https://docs.angularjs.org/guide/bootstrap
  #
  # Notice that `angular.bootstrap` will not create modules on the fly.
  # You must create any custom modules before you pass them as a parameter.
  angular.element(document).ready ->
    angular.bootstrap(document, ['myapp'])

But this was wrong. The last require statement (with angular.bootstrap()) was somehow getting filtered out when run through the r.js optimizer, thereby never kicking off the angular app.

The solution is to move that last block of code to a separate file/module, and then introduce it as a dependency to your require config, like so:

...
paths: ...
shim: ...
deps: ['require-helper']
...

and

require-helper.js:

require ['app', 'angular'], (app, angular) ->
  # Must manually bootstrap our app
  # https://docs.angularjs.org/guide/bootstrap
  # Notice that `angular.bootstrap` will not create modules on the fly.
  # You must create any custom modules before you pass them as a parameter.
  angular.element(document).ready ->
    angular.bootstrap(document, ['myapp'])

Hope this helps someone.

[chaituValKanO]

It helped me. But css is not rendering after minification using r.js