CODEWITHSUNDEEP
angularjsgruntjsgrunt-contrib-watchgrunt-contrib-uglify
Fabricio
Fabricio

Reputation: 3

Is Grunt's Uglify breaking my Angularjs code?

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!

Upvotes: 0

Views: 1174

Answers (1)

cyber_dave
cyber_dave

Reputation: 2029

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

See also:

Angular modules: Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

Angular minification best practices: Angularjs minify best practice

Upvotes: 3

Related Questions