使用 r.js 优化的 Angular js 应用程序不起作用答案

【问题标题】：Angular js application, optimized with r.js is not working使用 r.js 优化的 Angular js 应用程序不起作用
【发布时间】：2017-07-18 21:15:16
【问题描述】：

Angular JS 应用程序运行良好，但使用 r.js 优化时没有出现任何内容。这是源代码

在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']
    }
}

});

这里我根据开发环境切换app bootstrap和优化文件（可以在deps函数中看到）

应用引导文件：

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 输入文件（优化的js.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"
})

我正在使用node r.js -o optimizejs.js 来获取优化文件。请帮帮我。

【问题讨论】：

标签： angularjs requirejs r.js

【解决方案1】：

如果您正在努力最小化您的 Angular 代码，请确保根据 documentation 声明您的依赖注入。

例子：

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

到

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

或者您可以查看ng-annotate，以便在您构建代码时自动执行此操作。

【讨论】：