使用requirejs优化器优化后Angularjs找不到模块[重复]

Question

我在这个提交上有这个 repo angularseed：a9ad4568bd8534b888ae5cb3bf1a7f92f66d633d（只是学习工具和库）。也许有人可以帮助我。

我遇到的问题是当我尝试使用 requirejs 中的 Optimizer 优化我的代码时。我正在使用 grunt-contrib-requirejs。

要查看问题，您必须克隆 repo。

Nodejs 是必须的。

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

当我运行 prod 脚本时，似乎 ngRouter 没有正确加载并且。有人可以帮我找出问题吗？

Error log in Console

Grunt 文件：

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

谢谢！！

Answer 1

Angular 失败是因为它在你的函数上调用.toString() 来确定它需要注入哪些参数。当您缩小脚本时，这当然会立即中断。例如，而不是这个：

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

这会被缩小为：

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

由于 Angular 考虑得非常糟糕，它不知道上述缩小脚本中的 a 应该是 $routeProvider，所以当它出现时它会惨遭失败。

你需要这样做：

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

你可以在这里看到更多关于为什么 Angular 在缩小时如此容易崩溃的解释：https://scotch.io/tutorials/declaring-angularjs-modules-for-minification