L'application angulaire js, optimisée avec r.js ne fonctionne pas

Question

L'application Angular JS fonctionne correctement, mais rien ne s'affiche lorsqu'elle est optimisée avec r.js. Voici le code source

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

});

Ici, je commutation d'amorçage d'applications et de fichiers optimisés en fonction de l'environnement de développement (Vous pouvez voir en fonction DEPS)

fichier de démarrage App:

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' 
       }); 

     }); 
}); 

fichier d'entrée (de 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" 
}) 

J'utilise node r.js -o optimizejs.js pour obtenir le fichier optimisé. S'il vous plaît aidez-moi.

Answer 1

Si vous travaillez sur la minimisation de votre code angulaire, assurez-vous de déclarer votre injection de dépendance selon le documentation.

Exemple:

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

à

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

Ou vous pouvez regarder dans ng-annotate pour le faire automatiquement lorsque vous construisez le code.