Angularjs can't find module after optmize with requirejs optimizer

Question

I have this repo angularseed at this commit: a9ad4568bd8534b888ae5cb3bf1a7f92f66d633d (just learning tools and libs). Maybe somebody can help me.

The problem that I have it's when I try to optimize my code with Optimizer from requirejs. Im using grunt-contrib-requirejs.

To see the problem, you must to clone the repo.

Nodejs it's mandatory.

https://github.com/neonds/angularseed.git
cd angularseed
npm run configure //to download deps
npm run dev //then open http://localhost:9000
npm run prod

When I run the prod script, it seems that ngRouter its not correctly loaded and. Can Somebody help me to find the problem?

Error log in Console

Gruntfile:

module.exports = function(grunt) {
  'use strict';

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-requirejs');



 grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),

        project: {
            src: 'src',
            vendor: 'bower_components',
            build: 'build',
            dist: 'dist',
        },

        clean: {
            dist: '<%= project.dist %>',
            build: '<%= project.build %>'
        },

        jshint: {
            all: ['Gruntfile.js', '<%= project.src %>/scripts/**/*.js']
        },

        copy: {
            vendor: {
                files: [
                    {expand: true, cwd: '<%= project.vendor %>/angular/', src: ['angular.min.js', 'angular.min.js.map'], dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/angular-route/', src: ['angular-route.min.js', 'angular-route.min.js.map'], dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/requirejs/', src: 'require.js', dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/jquery/dist', src: 'jquery.min.js', dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/bootstrap/dist/', src: ['*/**.min.js', '*/**.min.js.map'], dest: '<%= project.build %>/assets/vendor/bootstrap'},
                    {expand: true, cwd: '<%= project.vendor %>/bootstrap/dist/', src: ['*/**.min.css', '*/**.min.css.map'], dest: '<%= project.build %>/assets/vendor/bootstrap'},
                    {expand: true, cwd: '<%= project.vendor %>/bootstrap/dist/fonts', src: '*', dest: '<%= project.build %>/assets/vendor/bootstrap/fonts'},
                    {expand: true, cwd: '<%= project.vendor %>/components-font-awesome/', src: ['css/*', 'fonts/*'], dest: '<%= project.build %>/assets/vendor/components-font-awesome'},
                ],
            },
            scripts: {
                files: [
                    {expand: true, cwd: '<%= project.src %>/', src: 'index.html', dest: '<%= project.build %>/'},
                    {expand: true, cwd: '<%= project.src %>/../', src: 'favicon.ico', dest: '<%= project.build %>/'},
                    {expand: true, cwd: '<%= project.src %>/scripts', src: ['**/*.js'], dest: '<%= project.build %>/assets/js'},
                    {flatten: true, expand: true, cwd: '<%= project.src %>/scripts', src: '**/*.html', dest: '<%= project.build %>/',  filter: 'isFile'},
                ],
            }

        },

        concat: {
            options: {
              separator: '\n\n',
            },

            build_css: {
                src: [
                '<%= project.src %>/**/*.css'
                ],

                dest: '<%= project.build %>/assets/css/styles.css'
            },
        },

        connect: {
                sever: {
                    options: {
                        hostname: 'localhost',
                        port: 9000,
                        base: 'build/',
                        livereload: 35729
                    }
                }
        },
        watch: {
            options: {
                livereload: true,
                dateFormat: function(time) {
                    grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
                    grunt.log.writeln('Waiting for more changes...');
                }
            },
            scripts: {
                files: '<%= project.src %>/**/*.js',
                tasks: ['jshint','copy:scripts'],
            },
            styles: {
                files: '<%= project.src %>/**/*.css',
                tasks: ['concat:build_css'],
            }
        },


        requirejs: {
            compile: {
                options: {
                    baseUrl: "./build/assets/js",
                    out: '<%= project.dist %>/<%= pkg.name %>-<%= pkg.version %>.min.js',
                    mainConfigFile:'./build/assets/js/main.js',
                    name: 'main'

                },
                preserveLicenseComments : false,
                optimize: "uglify"
            }
        }

        

 });


 grunt.registerTask('build', function(){
        grunt.task.run('clean');
        grunt.task.run('jshint');
        grunt.task.run('copy:vendor');
  grunt.task.run('copy:scripts');
        grunt.task.run('concat:build_css');
        grunt.task.run('connect');
        grunt.task.run('watch');
 });

    grunt.registerTask('dist', function () {
        grunt.task.run('clean');
        grunt.task.run('jshint');
        grunt.task.run('copy:vendor');
        grunt.task.run('copy:scripts');
        grunt.task.run('concat:build_css');
        grunt.task.run('requirejs');
    });
 };

Thanks!!

show the code of your grunt file. – Prateek Gupta May 09 '17 at 05:13 — Prateek Gupta, May 09 '17 at 05:13
Hi. I has updated the post with the grunt file. Thanks! – gdiazs May 09 '17 at 15:41 — gdiazs, May 09 '17 at 15:41

score 1 · Accepted Answer · answered May 09 '17 at 16:01

Angular fails because it calls .toString() on your functions to figure out what parameters it needs to inject. This of course immediately breaks when you minify your script. For example, instead of this:

appModule.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: '<home></home>'
    });
})

Which would get minified to something like:

appModule.config(function(a){a.when('/',{template:'<home></home>'})})

Since Angular was so poorly thought out it doesn't know that a in the above minified script is supposed to be $routeProvider so it just fails miserably when presented with this.

You need to do this:

appModule.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: '<home></home>'
    });
}])

You can see more explanation of why Angular breaks so easily when minified here: https://scotch.io/tutorials/declaring-angularjs-modules-for-minification

Wow!, thanks for youre time. It is good to know the problem with minification. — gdiazs, May 09 '17 at 21:13

Angularjs can't find module after optmize with requirejs optimizer

1 Answers1