r.jsで最適化されたAngular jsアプリケーションは動作しません

Question

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

}）内のソースコード

あります。

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

：

ここで私は（あなたがDEPS機能で見ることができる）の開発環境に基づいて

アプリケーションのブートストラップファイルをアプリケーションのブートストラップおよび最適化されたファイルを切り替えています

'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入力ファイル（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" 
}) 

私は最適化されたファイルを取得するためにnode r.js -o optimizejs.jsを使用しています。 私を助けてください。

Answer 1

角度コードの最小化に取り組んでいる場合は、documentationに従って依存性注入を宣言してください。

例：

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

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

したり、あなたがコードをビルドするときに自動的にそれを行うために ng-annotateに見ることができます。