angularjs - Uncaught Object when minifying simple Angular app with Grunt -
i have simple angular app defined so:
index.html
<body ng-app="waapp"> <div ng-controller="indexcontroller"> <h3>{[ test ]}</h3> </div> </body> waapp.js
(function() { var waapp = angular.module('waapp', [], function($interpolateprovider) { $interpolateprovider.startsymbol('{['); $interpolateprovider.endsymbol(']}'); }); })(); indexcontroller.js
(function() { var waapp = angular.module('waapp'); waapp.controller('indexcontroller', ['$scope', function($scope) { $scope.test = 'angular works, , grunt too.'; }]); })(); as can see, prepare variable mangling during minification using angular's array syntax while defining controller's dependencies.
yet when concatenate these files , minify them using grunt, so:
gruntfile.js
module.exports = function(grunt) { grunt.initconfig({ pkg: grunt.file.readjson('package.json'), concat: { options: { banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */\n' }, dist: { src: ['src/browser/js/*.js', 'src/browser/js/**/*.js'], dest: 'src/browser/public/js/app.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n', sourcemap: true, preservecomments: false, mangle: { except: ['angular'] } }, dist: { files: { 'src/browser/public/js/app.min.js': ['<%= concat.dist.dest %>'] } } } }); grunt.loadnpmtasks('grunt-contrib-concat'); grunt.loadnpmtasks('grunt-contrib-uglify'); grunt.registertask('default', ['concat', 'uglify']); }; i following error in chrome's debugger console:
uncaught object head.js:18 (anonymous function) head.js:18 (anonymous function) head.js:46 q head.js:19 e head.js:45 ec head.js:48 c head.js:30 dc head.js:30 wc head.js:29 (anonymous function) head.js:223 head.js:156 (anonymous function) head.js:43 q head.js:19 c head.js separate javascript file store angular.min.js (from official source). when don't minify concatenated javascript, don't error.
for completeness, following concatenated , minified concatenated javascript files:
app.js (works)
/*! whataddress - v0.0.1-1 - 2014-06-26 */ (function() { var waapp = angular.module('waapp', [], function($interpolateprovider) { $interpolateprovider.startsymbol('{['); $interpolateprovider.endsymbol(']}'); }); })(); (function() { var waapp = angular.module('waapp'); waapp.controller('indexcontroller', ['$scope', function($scope) { $scope.test = 'angular works, , grunt too.'; }]); })(); app.min.js (results in error)
/*! whataddress 26-06-2014 */ !function(){angular.module("waapp",[],function(a){a.startsymbol("{["),a.endsymbol("]}")})}(),function(){var a=angular.module("waapp");a.controller("indexcontroller",["$scope",function(a){a.test="angular works, , grunt too."}])}(); //# sourcemappingurl=app.min.js.map why happen though used angular's array syntax defining controller dependencies prior minification?
one error spot in app.js file don't seem prevent variable mangling $interpolateprovider. in app.min.js minified a angularjs knows nothing.
this might problem.
there grunt-ngmin plugin variable mangling automatically you. convenient.
i know using yeoman angular generator. generator provides useful gruntfile.js shows usage of grunt-ngmin.
Comments
Post a Comment