Javascript 角模缩小错误

花最宝贵的时间试图弄明白为什么缩小不起作用

---

我已经通过一个数组对象注入了我的提供者，然后根据web上的许多建议使用了该函数，但仍然是“未知提供者：一个提供者我在使用Grunt.js插件之前遇到了这个问题

其中一个选项是

uglify: {
  options: {
    mangle: false
  },

我相信它在“like string”上运行正则表达式函数并缩小它们

例如：

angular.module("imgur", ["imgur.global","imgur.album"]);

将成为：

angular.module("a", ["a.global","a.album"]);

禁用它---此功能对Angular不起作用

编辑： 更准确地说，正如@joshdavidiller所解释的：

Uglify

mangle

只会像变量一样变形，这实际上是导致AngularJS问题的原因。也就是说，问题在于注入，而不是定义

函数MyCtrl（$scope，myService）

将被损坏为

函数MyCtrl（a，b）

，但字符串中的服务定义永远不会被更改

• 在运行

  uglify

  之前运行

  ng min

  可以解决此问题

---

andrem96关于

ng min

的建议是正确的

---

对齐和空白对Uglify和角度都很重要。
Uglify有一个选项，可以禁用对特定文件的损坏：

options: {
  mangle: {
     except: ['jQuery', 'angular']
  }
}

---

我在使用grunt、ngmin和uglify时遇到了类似的问题
我按以下顺序运行了这个过程：concat、ngmin、uglify
我一直在从angular得到$injector错误，直到我在丑陋的选项中添加了mangle:false——然后一切都被修复了
我还试着给丑八怪添加如下例外：

 options: {
  mangle: {
     except: ['jQuery', 'angular']
  }
}

但是没有用
以下是我的Grunfile.js，以进一步澄清：

module.exports = function(grunt) {
'use strict';
// Configuration goes here
grunt.initConfig({
    pkg: require('./package.json'),

    watch: {
        files: ['scripts/**/*.js', 'test/**/*spec.js', 'GruntFile.js'],
        tasks: ['test', 'ngmin']
    },

    jasmine : {
        // Your project's source files
        src : ['bower_components/angular/angular.js', 'bower_components/angular-mocks/angular-mocks.js', 'scripts/app.js', 'scripts/**/*.js' ],
        // Your Jasmine spec files

        options : {
            specs : 'test/**/*spec.js',
            helpers: 'test/lib/*.js'
        }
    },

    concat: {
      dist : {
          src: ['scripts/app.js', 'scripts/**/*.js'],
          dest: 'production/js/concat.js'
      }
    },

    ngmin: {
        angular: {
            src : ['production/js/concat.js'],
            dest : 'production/js/ngmin.js'
        }

    },

    uglify : {
        options: {
            report: 'min',
            mangle: false
        },
        my_target : {
            files : {
                'production/app/app.min.js' : ['production/js/ngmin.js']
            }
        }
    },

  docular : {
      groups: [],
      showDocularDocs: false,
      showAngularDocs: false
  }

});

// Load plugins here
grunt.loadNpmTasks('grunt-ngmin');
grunt.loadNpmTasks('grunt-docular');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');

// Define your tasks here
grunt.registerTask('test', ['jasmine']);
grunt.registerTask('build', ['concat', 'ngmin', 'uglify']);
grunt.registerTask('default', ['test', 'build', 'watch']);

---

}；
我也遇到了同样的错误。但是，对我来说，问题是指令的控制器声明。你应该改为这样做

myModule.directive('directiveName', function factory(injectables) {
    var directiveDefinitionObject = {
      templateUrl: 'directive.html',
      replace: false,
      restrict: 'A',
      controller: ["$scope", "$element", "$attrs", "$transclude", "otherInjectables",
        function($scope, $element, $attrs, $transclude, otherInjectables) { ... }]
    };
    return directiveDefinitionObject;
  });

问题 发件人：
Angular有一个内置的依赖项注入器，可以通过适当的 根据函数参数的名称将对象添加到函数：

function MyController($scope, $window) {
    // ...
}

在这里，将显示参数

$scope

和

$window

的名称 匹配已知名称的列表，并获取相应的对象 实例化并传递给函数。Angular获取参数 通过调用函数上的

toString（）

，然后解析 函数定义
当然，这样做的问题是，停止工作 当您缩小代码时。因为您关心用户体验 您将缩小代码，因此使用此DI机制将 破坏你的应用程序。事实上，一种常见的开发方法是使用 开发中未统一的代码，以简化调试，然后缩小 推送到生产或暂存时的代码。在这种情况下 问题不会出现在你面前，直到你到了它出现的时候 最痛
（……）
因为这种依赖注入机制实际上在 一般情况下，Angular也提供了一种机制， 它提供了两种方法。您可以像这样传递数组：

module.controller('MyController', ['$scope', '$window', MyController]);

或者，您可以在构造函数上设置

$inject

属性：

MyController.$inject = ['$scope', '$window'];

解决方案 可用于自动添加缩小所需的批注：

ng annotate

添加和删除AngularJS依赖项注入 注释。它是非侵入性的，因此您的源代码保持原样 否则相同。没有丢失的注释或移动的行

ng annotate

比（现已弃用）更快、更稳定，并且它有许多工具的插件：

---

从AngularJS 1.3开始，ngStrictDi中还有一个名为

的新参数：

如果app元素上存在此属性，则喷油器将
在“严格di”模式下创建。这意味着应用程序将失败
调用不使用显式函数注释的函数（和
因此不适合缩小），如中所述，有用的调试信息将有助于跟踪
找出这些错误的根源

这很难调试，因为许多服务的名称相同（主要是e或a）。这不会解决错误，但会为您提供未解决服务的名称，使您能够在丑陋的输出中跟踪代码中的位置，并最终使您能够解决问题：

进入Uglify2的
lib/scope.js
（
node_modules/grunt contrib uglify/node_modules/uglify js/lib/scope.js
）并替换该行

this.mangled_name = this.scope.next_mangled(options);

与

我遇到了一个类似的问题。然后用下面的方法解决了它。在运行uglify之前，我们需要运行一个名为Gulp ng annotate的Gulp模块。
所以我们安装了这个模块

npm install gulp-ng-annotate --save-dev

然后在Gulpfile.js中执行require

ngannotate = require(‘gulp-ng-annotate’)

在你的usemin任务中，做类似的事情

js: [ngannotate(), uglify(),rev()] 

这为我解决了问题

[编辑：固定打字错误]
你用什么来缩小你的代码？uglifyJS？也可以查看：；）我用了ngmin，它所做的只是用不同的空白格式排列代码。我尝试使用express uglify作为中间件，但它不起作用，所以我试着手动使用在线uglifier。无论哪种方式，代码都是一样的。还有，是否缺少
]
？（在结束前
）
）有，我把它们忘在了这个特殊的片段中。这并没有改变“未知提供者a”仍然存在的事实：（好吧，好吧，你使用了什么在线迷你程序？这与你的代码配合得很好：他更新了他的代码。他的问题不是“$locationProvider”变成了“b”“或诸如此类的。它只是不起作用。然而，这个答案+1:）谢谢，我很难找到那个选项。我在使用angular bootstrap+yeoman时遇到了完全相同的情况。使用它生成了一个
dist
构建，该构建将包含所提到的依赖项错误“未知提供程序”。设置
mangle:false
解决了问题。(注:
npm install gulp-ng-annotate --save-dev

ngannotate = require(‘gulp-ng-annotate’)

js: [ngannotate(), uglify(),rev()]