0
votes

I'm working with the ngStart Angular seed project and I'm trying to optimize RequireJS for deployment. When I run the grunt job to build the artifact, I end up with an output file that does not include all of the libraries in my main.js file. I've spent most of today trying different things to get this to work. If I explicity list every module in my gruntfile (something I really don't want to do) they all get in there, but seemingly not in the right order as it doesn't work in the browser. I thought that the optimizer was supposed to read the require.config call in my main.js and load everything in the correct order. Below is what I thought should work, but isn't loading all of my modules.

grunt task:

requirejs: {
    compile: {
        options: {
            baseUrl: "<%= pkg.folders.jsSource %>",
            name: "main",
            include: [
                'almond'
            ],
            mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
            out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/modules/main.js",
            optimize: "none",
            paths: {
                'almond': '../../../bower_components/almond/almond',
                'config/configuration': 'config/<%=configuration%>'
            },
            generateSourceMaps: true,
            preserveLicenseComments: false,
            useSourceUrl: true,
            uglify2: {
                // TODO - angular.js is already minified, mangling destroys it, so mangling is currently globally disabled
                mangle: false
             }
         }
     }
 }

main.js:

/*global require */
(function (require) {
    "use strict";
    require.config({
        paths: {
            'jquery': '../../../bower_components/jquery/jquery',
            'jquery-ui': '../../../bower_components/jquery-ui/ui/jquery-ui',
            'jquery.ui.widget': '../../../bower_components/jquery-ui/ui/jquery.ui.widget',
            'bootstrap': '../../../bower_components/bootstrap/dist/js/bootstrap',
            'angular': '../../../bower_components/angular/angular',
            'ngResource': '../../../bower_components/angular-resource/angular-resource',
            'angular-route': '../../../bower_components/angular-route/angular-route',
            'angular-sanitize': '../../../bower_components/angular-sanitize/angular-sanitize',
            'ngUi': '../../../bower_components/angular-ui/build/angular-ui',
            'ui.bootstrap': '../external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
            'ngCalendar': '../../../bower_components/angular-ui-calendar/src/calendar',
            'uikeypress': '../../../bower_components/angular-ui-utils/modules/keypress/keypress',
            'dtPicker': '../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
            'fileUpload': '../../../bower_components/blueimp-file-upload/js/jquery.fileupload',
            'fullcalendar': '../../../bower_components/fullcalendar/fullcalendar',
            'iframeTransport': '../external-libs/iframetransport/jquery.iframe-transport',
            'moment': '../../../bower_components/momentjs/moment'
        },
        shim: {
            'jquery': { deps: [], exports: 'jquery' },
            'jquery-ui': { deps: ['jquery'], exports: 'jquery-ui' },
            'jquery.ui.widget': { deps: ['jquery'], exports: 'jquery-ui-widget' },
            'bootstrap': { deps: ['jquery'], exports: 'bootstrap' },
            'angular': { deps: ['jquery'], exports: 'angular' },
            'ngResource': { deps: ['angular'], exports: 'ngResource' },
            'angular-route': { deps: ['angular'], exports: 'ngRoute' },
            'angular-sanitize': { deps: ['angular'], exports: 'ngSanitize' },
            'ngUi': { deps: ['angular'], exports: 'ngUi' },
            'ui.bootstrap': { deps: ['angular', 'bootstrap', 'ngUi'], exports: 'ui-bootstrap' },
            'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'], exports: 'ngCalendar' },
            'uikeypress': { deps: ['angular', 'ngUi'], exports: 'uikeypress' },
            'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'], exports: 'dtPicker' },
            'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'], exports: 'fileUpload' },
            'fullcalendar': { deps: ['jquery', 'jquery-ui'], exports: 'fullcalendar' },
            'iframeTransport': { deps: ['jquery', 'jquery-ui'], exports: 'iframeTransport' },
            'moment': { deps: ['jquery'], exports: 'moment' }
        },
        priority: ['angular']
    });

    require(['config/config',
             'angular',
             'angular-route'],
        function (config, angular, routes) {
            require(config.standardRequireModules, function (angular) {
                angular.bootstrap(document, ["app"]);
            });
        });
}(require));

When I run the task, I get this:

Running "requirejs:compile" (requirejs) task

Tracing dependencies for: main

/Users/user/dev/project/trunk-angular/target/project-0.1.0/modules/main.js
----------------
/Users/user/dev/project/trunk-angular/bower_components/almond/almond.js
/Users/user/dev/project/trunk-angular/bower_components/jquery/jquery.js
/Users/user/dev/project/trunk-angular/bower_components/angular/angular.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/configuration.js
/Users/user/dev/project/trunk-angular/bower_components/bootstrap/dist/js/bootstrap.js
/Users/user/dev/project/trunk-angular/bower_components/angular-ui/build/angular-ui.js
/Users/user/dev/project/trunk-angular/src/main/external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/config.js
/Users/user/dev/project/trunk-angular/bower_components/angular-route/angular-route.js
/Users/user/dev/project/trunk-angular/src/main/modules/main.js

Root of the project is /Users/user/dev/project/trunk-angular.

All of the path variables should be fine (they are in the other tasks and the outputted paths are right). I just don't know what's going on and would greatly appreciate some help.

1
Just wanted to point out that your "mangle:false" setting and comment next to it helped me solve a similar issue with other libraries. Thank you!Javier Constanzo

1 Answers

3
votes

First, I see, you are using nested require calls, but your build configuration doesn't include findNestedDependencies: true.

Second, requirejs optimizer includes only those modules from path, that are explicitly required, or defined as a dependency for other modules, that are required later.