Is Grunt's Uglify breaking my Angularjs code?

Question

So, I'm new on Grunt and I'm making an small app to test the watch, concat, uglify and cssmin plugins.

I'm concatenating my JS code and uglifying the concated file. But I'm getting a "Error: [ng:areq]" on my console. If I call my JS files individually without using uglify and concat, it works fine.

Here is my code:

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

};

And this is the error itself:

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

Thanks!

that's one reason why grunt-ng-annotate is there.

YOU
– YOU

2016-05-23 02:54:21 +00:00
Commented May 23, 2016 at 2:54 — YOU
– YOU, Commented May 23, 2016 at 2:54

Community · Accepted Answer · 2017-05-23 11:33:16Z

3

Grunt isn't the issue here. You're bootstrapping a new Angular module twice.

Example:

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

Collectives™ on Stack Overflow

Is Grunt's Uglify breaking my Angularjs code?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related