Uglify от Grunt ломает мой код Angularjs?

Итак, я новичок в Grunt и делаю небольшое приложение для тестирования плагинов watch, concat, uglify и cssmin.

Я объединяю свой код JS и удаляю объединенный файл. Но я получаю сообщение «Ошибка: [ng:areq]» на своей консоли. Если я вызываю свои файлы JS по отдельности, не используя uglify и concat, все работает нормально.

Вот мой код:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="ezSeguros">
<head>
    <meta charset="UTF-8">
    <title>Gestión de Seguros</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <!-- Styles -->
    <link rel="stylesheet" href="build/css/styles.min.css" />
</head>
<body>
    <div class="container">
        <div class="row" ng-controller="InputController as nameCtrl">
            <input type="text" ng-change="nameCtrl.showName(name)" ng-model="name" />
        </div>
    </div>
    <!-- jQuery -->
    <script src="assets/libs/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/libs/bootstrap.min.js"></script>
    <!-- Angular -->
    <script src="assets/libs/angular.min.js"></script>
    <!-- Scripts -->
    <script src="build/js/scripts.min.js"></script>
</body>
</html>

app.js

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

controller.js

function showCtrl() {
    this.showName = function(name){
        console.log(name);
    }
}

angular
    .module('ezSeguros',[])
    .controller('InputController',[showCtrl]);

Gruntfile.js

module.exports= function(grunt){

    // Project configuration. 
    grunt.initConfig({
        watch: {
            js: {
                files: ['app/**/*.js'],
                tasks: ['concat:js','uglify'],
            },
            css: {
                files: ['assets/css/custom/**/*.css'],
                tasks: ['concat:css','cssmin'],
            },
        },
        concat: {
            options: {
                banner: '(function () {',
                separator: '})(); (function () {',
                footer: '})();'
            },
            js: {
                src: ['assets/js/**/*.js','app/**/*.js'],
                dest: 'build/js/scripts.js',
            },
            css: {
                src: ['assets/css/custom/**/*.css'],
                dest: 'build/css/styles.css',
            },
        },
        uglify: {
            options: {
                mangle: false
            },
            scripts: {
                files: {
                    'build/js/scripts.min.js': ['build/js/scripts.js']
                }
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'build/css/styles.min.css': ['build/css/styles.css']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask('default',['concat','uglify','cssmin','watch']);

};

А это сама ошибка:

https://docs.angularjs.org/error/ng/areq?p0=InputController&p1=not%20a%20function,%20got%20undefined

Спасибо!

Fabricio 23.05.2016 источник

comment

это одна из причин, по которой grunt-ng-annotate здесь. - YOU 23.05.2016

Ответы (1)

arrow_upward
3
arrow_downward

Грунт здесь не при чем. Вы дважды загружаете новый модуль Angular.

Пример:

angular
  .module('ezSeguros') // Your new angular module is already defined in app.js
  .controller('InputController',[showCtrl]);

Лучшие практики минификации Angular: лучшие практики минимизации Angularjs

cyber_dave 23.05.2016

Uglify от Grunt ломает мой код Angularjs?

Ответы (1)

Вопросы по теме