Uncaught Object при минимизации простого приложения Angular с помощью Grunt

У меня есть простое приложение Angular, которое определяется следующим образом:

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, and Grunt too.';
  }]);

})();

Как вы можете видеть, я уже готовлюсь к искажению переменных во время минимизации, используя синтаксис массива Angular при определении зависимостей контроллера.

Тем не менее, когда я затем объединяю все эти файлы и минимизирую их, используя Grunt, вот так:

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

Я получаю следующую ошибку в консоли отладчика Chrome:

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
a head.js:156
(anonymous function) head.js:43
q head.js:19
c

head.js это просто отдельный файл JavaScript, где я храню angular.min.js (из официального источника). Когда я не минимизирую свой составной javascript, я не получаю эту ошибку.

Для полноты ниже приведены мои сцепленные и сжатые файлы javascript:

app.js (работает)

/*! 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, and Grunt too.';
  }]);

})();

app.min.js (приводит к ошибке)

/*! 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, and Grunt too."}])}();
//# sourceMappingURL=app.min.js.map

Почему это происходит, хотя я использовал синтаксис массива Angular для определения зависимостей контроллера до минификации?

Источник

1 ответ

Решение

Одна ошибка, которую я замечаю в вашем файле app.js, заключается в том, что вы, похоже, не предотвращаете искажение переменных для $interpolateProvider, В app.min.js он просто сокращен до a о котором AngularJS ничего не знает.

Это может быть проблемой.

Существует плагин grunt-ngmin, который выполняет автоматическое изменение переменных для вас. Это очень удобно.

Я знаю об этом, используя Yeoman Angular Generator. Этот генератор также предоставляет очень полезный Gruntfile.js, который показывает использование grunt-ngmin.

Источник
Другие вопросы по тегам