Có thời gian tuyệt vời nhất để cố gắng tìm ra lý do tại sao quá trình thu nhỏ không hoạt động.

Tôi đã đưa vào qua một đối tượng mảng mà các nhà cung cấp của tôi có chức năng trước khi có nhiều đề xuất trên web và vẫn "Nhà cung cấp không xác định: aProvider <- a"

Đều đặn:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    $locationProvider.html5Mode(true);
    }])

Thu nhỏ:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function(a, b){
    a.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    b.html5Mode(true);
    }])

Bất kỳ đề nghị sẽ có nghĩa vụ nhiều!

Tôi đã gặp sự cố này trước đây với plugin Grunt.js Uglify .

Một trong những lựa chọn là mangle

uglify: {
  options: {
    mangle: false
  },

Mà tôi tin rằng chạy các hàm regex trên "giống như chuỗi" và thu nhỏ chúng.

Ví dụ:

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

Sẽ trở thành:

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

Tắt nó đi --- tính năng này không hoạt động tốt với Angular.

Biên tập:

Nói chính xác hơn như @JoshDavidMiller giải thích:

Uglify manglechỉ mangles như các biến, đó là nguyên nhân thực sự gây ra vấn đề AngularJS. Đó là, vấn đề là ở tiêm chứ không phải định nghĩa.

function MyCtrl($scope, myService)sẽ bị xáo trộn function MyCtrl(a, b), nhưng định nghĩa dịch vụ bên trong một chuỗi không bao giờ được thay đổi.

• Chạy ng-mintrước khi chạy uglifygiải quyết vấn đề này.

Vấn đề

Từ AngularJS: The Bad Parts :

Angular có một bộ phun phụ thuộc tích hợp sẽ truyền các đối tượng thích hợp vào hàm của bạn dựa trên tên của các tham số của nó:

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

Tại đây, tên của các tham số $scopevà $windowsẽ được so khớp với danh sách các tên đã biết, và các đối tượng tương ứng sẽ được khởi tạo và chuyển đến hàm. Angular lấy tên tham số bằng cách gọi toString()hàm, sau đó phân tích cú pháp định nghĩa hàm.

Tất nhiên, vấn đề với điều này là nó ngừng hoạt động ngay khi bạn rút gọn mã của mình . Vì bạn quan tâm đến trải nghiệm người dùng, bạn sẽ giảm thiểu mã của mình, do đó việc sử dụng cơ chế DI này sẽ phá vỡ ứng dụng của bạn. Trên thực tế, một phương pháp phát triển phổ biến là sử dụng mã không hợp nhất trong quá trình phát triển để dễ gỡ lỗi và sau đó rút gọn mã khi chuyển sang sản xuất hoặc dàn dựng. Trong trường hợp đó, vấn đề này sẽ không tồn tại sau cái đầu xấu xí của nó cho đến khi bạn ở thời điểm mà nó đau đớn nhất.

(...)

Vì cơ chế tiêm phụ thuộc này không thực sự hoạt động trong trường hợp chung, Angular cũng cung cấp một cơ chế hoạt động. Để chắc chắn, nó cung cấp hai. Bạn có thể chuyển dọc theo một mảng như vậy:

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

Hoặc bạn có thể đặt thuộc $injecttính trên hàm tạo của mình:

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

Giải pháp

Bạn có thể sử dụng ng-annotateđể tự động thêm các chú thích cần thiết để thu nhỏ:

ng-annotatethêm và xóa chú thích chèn phụ thuộc AngularJS. Nó không xâm nhập nên mã nguồn của bạn vẫn hoàn toàn giống nhau. Không có bình luận bị mất hoặc dòng di chuyển.

ng-annotatenhanh hơn và ổn định hơn ngmin(hiện không được dùng nữa) và nó có các plugin cho nhiều công cụ:

• grunt-ng-annotate
• gulp-ng-annotate
• browserify-annotate

Bắt đầu từ AngularJS 1.3, cũng có một tham số mới ngAppđược gọi là ngStrictDi:

nếu thuộc tính này xuất hiện trên phần tử ứng dụng, bộ phun sẽ được tạo ở chế độ "nghiêm ngặt". Điều này có nghĩa là ứng dụng sẽ không gọi được các hàm không sử dụng chú thích hàm rõ ràng (và do đó không phù hợp để rút gọn), như được mô tả trong hướng dẫn Dependency Injection và thông tin gỡ lỗi hữu ích sẽ hỗ trợ tìm ra gốc rễ của những lỗi này.

Tôi gặp lỗi tương tự. Tuy nhiên, đối với tôi, vấn đề là khai báo bộ điều khiển của chỉ thị. Bạn nên làm điều này thay thế.

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

https://github.com/angular/angular.js/pull/3125

Tôi đã gặp sự cố tương tự khi sử dụng grunt, ngmin và uglify.

Tôi đã chạy quy trình theo thứ tự sau: concat, ngmin, uglify

Tôi tiếp tục nhận được lỗi $ injectionor từ angle cho đến khi tôi thêm vào mangle tùy chọn uglify: false - sau đó mọi thứ đã được khắc phục.

Tôi cũng đã cố gắng thêm các ngoại lệ cho uglify như thế này:

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

Nhưng không có kết quả...

Đây là gruntFile.js của tôi để làm rõ thêm:

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

}

AndrewM96 gợi ý ng-minlà đúng.

Căn chỉnh và khoảng trắng quan trọng đối với Uglify cũng như Angular.

Tôi đã có một vấn đề tương tự. Và giải quyết nó theo cách sau. Chúng ta cần chạy một mô-đun Gulp có tên là gulp-ng-annotate trước khi chạy uglify. Vì vậy, chúng tôi cài đặt mô-đun đó

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

Sau đó, thực hiện yêu cầu trong Gulpfile.js

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

Và trong nhiệm vụ usemin của bạn, hãy làm điều gì đó như thế này

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

Điều đó đã giải quyết nó cho tôi.

[EDIT: Đã sửa lỗi chính tả]

Uglify có một tùy chọn để vô hiệu hóa việc tạo lỗi trên các tệp cụ thể:

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

https://github.com/gruntjs/grunt-contrib-uglify#reserved-identifiers

Điều này rất khó gỡ lỗi vì rất nhiều dịch vụ được đặt tên giống nhau (chủ yếu là e hoặc a). Điều này sẽ không giải quyết được lỗi, nhưng sẽ cung cấp cho bạn tên của dịch vụ chưa được giải quyết cho phép bạn theo dõi, trong đầu ra chưa được xác minh, vị trí trong mã và cuối cùng cho phép bạn giải quyết vấn đề:

Đi vào lib/scope.jsUglify2 ( node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/scope.js) và thay thế dòng

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

với

this.mangled_name = this.name + "__debugging_" + counter++