Angular js application, optimized with r.js is not working

Question

Angular JS application is working fine, but nothing is appearing when optimized with r.js. Here is the source code

in index.html

<script data-main="scripts/main.js" src="libs/requirejs/require.js"></script>

main.js

require.config({
baseUrl: '../',
waitSeconds: 200,
paths: {
    'appBootstrap': 'scripts/appBootstrap',
    'angular': 'libs/angular/angular',
    'ngRoute': 'libs/angular/angular-route',
    'ngMessages': 'libs/angular/angular-messages',
    'jQuery': 'libs/jquery/jquery-2.2.1',
    'bootstrap': 'libs/bootstrap/bootstrap',
    'ui.bootstrap': 'libs/bootstrap/ui-bootstrap-tpls-1.3.1',
    'pace': 'libs/others/pace',
    'toastr': 'libs/others/toastr',
    'routes': 'scripts/routes',
    'text': 'libs/requirejs/text',
    'ngTable': 'libs/angular/ng-table.min',
    'app': 'scripts/app'
},
deps: (function () {
    //return [ "../output/app.min" ]; // For Production
    return ["appBootstrap"]; //For Development
})(),

shim: {
    'angular': {
        exports: 'angular'
    },
    'ngRoute': {
        deps: ['angular']
    },
    'ngMessages': {
        deps: ['angular']
    },
    'bootstrap': {
        deps: ['jQuery']
    },
    'ui.bootstrap': {
        deps: ['angular']
    },
    'toastr': {
        deps: ['jQuery'],
        exports: 'toastr'
    },
    'pace': {
        exports: ['pace']
    },
    'ngTable': {
        deps: ['angular']
    }
}

});

Here I am switching app bootstrap and optimized file based on development environment( You can see in deps function)

App bootstrap file:

define(['app', 'routes'], function (app, routes) {
    try {
            // bootstrap the app manually
            angular.bootstrap(document, ['app']);
    } catch (e) {
        console.log("Error in bootstraping the root"+ e.message);
        console.error(e.stack);
    }  
});

app.js

'use strict';
define(['angular',
        'ngRoute',
        'ngMessages',
        'ngTable',
        'ui.bootstrap',
        'controllers/controllers',
        'directives/directives',
        'filters/filters',
        'factories/factories',
        'constants/constants'],
    function (angular) {
        var app = angular.module('app', ['ngRoute',
                                         'ngMessages',
                                         'ngTable',
                                         'ui.bootstrap',
                                         'app.controllers',
                                         'app.directives',
                                         'app.filters',
                                         'app.factories',
                                         'app.constants']);
        app.run(function ($rootScope, $http, $location, apiCallFactory) {
                    ......
        });
        return app;
    });

routes.js

define(['app'], function (app) {
    'use strict';
     return app.config(function ($routeProvider, $locationProvider) {
            $routeProvider
                .when('/adminHome', {
                    templateUrl: 'templates/adminHome.html',
                    controller: 'adminHomeCtrl'
                })
                .when('/login', {
                    templateUrl: 'templates/login.html',
                    controller: 'loginCtrl'
                })
                .when('/profile', {
                    templateUrl: 'templates/userProfile.html',
                    controller: 'userProfileCtrl'
                })
                .otherwise({
                    redirectTo: '/login'
                });

        });
});

r.js input file (optimizedjs.js)

({
    baseUrl: '../',
    waitSeconds: 200,
    paths: {
        'appBootstrap': 'scripts/appBootstrap',
        'angular': 'libs/angular/angular',
        'ngRoute': 'libs/angular/angular-route',
        'ngMessages': 'libs/angular/angular-messages',
        'jQuery': 'libs/jquery/jquery-2.2.1',
        'bootstrap': 'libs/bootstrap/bootstrap',
        'ui.bootstrap': 'libs/bootstrap/ui-bootstrap-tpls-1.3.1',
        'pace': 'libs/others/pace',
        'toastr': 'libs/others/toastr',
        'routes': 'scripts/routes',
        'text': 'libs/requirejs/text',
        'ngTable': 'libs/angular/ng-table.min',
        'app': 'scripts/app'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngRoute': {
            deps: ['angular']
        },
        'ngMessages': {
            deps: ['angular']
        },
        'bootstrap': {
            deps: ['jQuery']
        },
        'ui.bootstrap': {
            deps: ['angular']
        },
        'toastr': {
            deps: ['jQuery'],
            exports: 'toastr'
        },
        'pace': {
            exports: ['pace']
        },
        'ngTable': {
            deps: ['angular']
        }
    },
    stubModules: ['text'],
    name: "appBootstrap",
    out: "../output/app.min.js"
})

I am using node r.js -o optimizejs.js to get the optimized file. Please help me out.

Icycool Icycool · Accepted Answer · 2017-02-28T04:27:10

If you are working on minimizing your angular code, make sure you declare your dependency injection according to the documentation.

Example:

return app.config(function ($routeProvider, $locationProvider) {

to

return app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

Or you can look into ng-annotate to do that automatically when you build the code.

Angular js application, optimized with r.js is not working

1 Answers