angularjs App funktioniert nicht nach der Code-Konkation

Question

Ich habe und angularjs app.Ich möchte alle JS Dateien zu einer einzigen Datei verketten.Ich versuche derzeit, Grunt.js zu verwenden, um einen automatischen Build-Prozess für die Verkettung von JavaScript einzurichten Dateien.

aber meine Anwendung läuft ohne Fehler vor concatenation.But nach concatinating die Dateien meine app wirft Fehler: $ Injektor: modulerr Modulfehler.

Unten ist mein Code nach minification

angular.module('myApp', []); 
 

 

 
var app = angular 
 
    .module('myApp', [ 
 
    'ngRoute' 
 
    ]); 
 

 
app.config(function ($routeProvider) { 
 
    'use strict'; 
 
    $routeProvider 
 
     .when('/', { 
 
     templateUrl: 'views/main.html', 
 
     controller: 'mainCntrl' 
 
     }) 
 
     .when('/about', { 
 
     templateUrl: 'views/about.html', 
 
     controller: 'aboutCntrl', 
 
     controllerAs: 'about' 
 
     }) 
 
     .otherwise({ 
 
     redirectTo: '/' 
 
     }); 
 
    }); 
 

 
    app.controller('mainCntrl',['$scope', function ($scope) { 
 
    \t 'use strict'; 
 

 
    this.awesomeThings = [ 
 
     'HTML5 Boilerplate', 
 
     'AngularJS', 
 
     'Karma' 
 
    ]; 
 
    
 
    }]); 
 

 
app.controller('aboutCntrl',['$scope', function ($scope) { 
 
    'use strict'; 
 
    this.awesomeThings = [ 
 
     'HTML5 Boilerplate', 
 
     'AngularJS', 
 
     'Karma' 
 
    ]; 
 
    }]);

Jede Hilfe appreciated.THANKS :)

Answer 1

Sie müssen streng entweder Inline Array Annotation von DI oder $inject Property Annotation folgen, während minifying js Dateien.

app.config(function ($routeProvider) { 
    'use strict'; 
    //code 
}); 

sollte zu unterem Code geändert werden.

Inline Array Annotation

app.config(['$routeProvider', function ($routeProvider) { 
    'use strict'; 
    //code as is 
}]); 

$inject Property Annotation

var config = function($routeProvider) { 
    'use strict'; 
    //code as is 
} 
config.$inject = ['$routeProvider']; 
app.config(config); 

Answer 2

Scheint, wie die Config-Linie Ihr Problem ist, versuchen app.config(['$routeProvider', function ($routeProvider) { ... }]);

Answer 3

Ja, Ihre Anmerkung ist nicht richtig. Es sollte

app.config(['$routeProvider', function ($routeProvider) { 
    'use strict'; 
    //code 
}]); 

Verwenden ng-annotate als sichere, saubere und einfache Lösung.

Was es tut ist, dass wenn Sie grunt es Ihre Definitionen den richtigen Weg kommentieren, so müssen Sie nicht mit Angulars schrulligen Weg beschäftigen.

Run ng-annotate auf

app.config(function($routeProvider) { 
    'use strict'; 
    //code 
}); 

und es wird die automatische Vervollständigung für minification:

app.config(["routeProvider", function($routeProvider) { 
    'use strict'; 
    //code 
}]); 

Answer 4

Sie auch einen weiteren Schritt zu Ihrem Build-Workflow hinzufügen können - grunt-ng-annotate in diesem Fall, dass Sie kann fast alle strikten DI-Annotationen überspringen. Mit diesem Plugin können Sie vereinfachen Dienste/controllers Definitionen z.B .:

app.controller('mainCntrl', function ($scope) { 
    'use strict'; 

    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    }); 

Es ist sehr hilfreich, wenn Sie eine lange Liste von Dienstleistungen wuchten in die Steuerung oder einen anderen Dienst zu injizieren. Sie müssen nicht daran denken, jede Abhängigkeit zweimal zu stellen.