Angular.module 최소 버그

Angular.module 최소 버그

왜 최소화가 작동하지 않는지 알아내려고 애쓰는 중.

어레이 오브젝트를 통해 프로바이더가 웹상의 수많은 제안에 따라 기능을 수행하기 전에 프로바이더를 삽입했지만 "Unknown provider: aProvider <-a"는 그대로입니다.

일반:

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

최소화:

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

어떤 제안이라도 해주시면 감사하겠습니다!

이전에 Grunt.js Uglife 플러그인에서 이 문제가 발생했습니다.

옵션 중 하나는 magle입니다.

uglify: {
  options: {
    mangle: false
  },

"같은 문자열"로 regex 함수를 실행하고 미니피스를 사용하는 것 같습니다.

예를 들어 다음과 같습니다.

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

다음과 같이 됩니다.

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

비활성화 --- 이 기능은 Angular와 함께 사용할 수 없습니다.

편집:

좀 더 정확하게 말하면 @JoshDavidMiller의 설명:

우글리프mangle만 존재하기 , 즉 Angular의 ., 정의가아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 맞다.

function MyCtrl($scope, myService) 찢기다function MyCtrl(a, b)단, 문자열 내의 서비스 정의는 변경되지 않습니다.

• .ng-min를 실행하기 uglify을 사용하다

문제

각도에서JS: 불량 부품:

Angular에는 파라미터의 이름을 기반으로 적절한 객체를 함수에 전달하는 종속성 인젝터가 내장되어 있습니다.

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

파라미터의 을 .$scope ★★★★★★★★★★★★★★★★★」$window는 기존의 이름 목록과 대조되어 대응하는 오브젝트가 인스턴스화되어 함수에 전달됩니다.는 Angular를 호출하여 .toString()함수의 정의를 해석합니다.

물론 이 문제는 코드를 최소화하는 순간 작동이 중지된다는 것입니다.유저 익스피리언스를 중시하고 있기 때문에, 이 DI메커니즘을 사용하면, 애플리케이션이 다운됩니다.실제로 일반적인 개발 방법론은 디버깅을 용이하게 하기 위해 개발 중에 미확정 코드를 사용한 후 프로덕션 또는 스테이징으로 푸시할 때 코드를 최소화하는 것입니다.이 경우, 이 문제는 당신이 가장 아픈 지점에 도달할 때까지 악화되지 않을 것입니다.

(...)

이 의존성 주입 메커니즘은 일반적인 경우에는 실제로 작동하지 않기 때문에 Angular는 또한 작동하는 메커니즘을 제공합니다.확실히, 두 가지를 제공합니다.다음과 같이 어레이를 전달할 수 있습니다.

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

또는 다음 설정을 할 수 있습니다.$inject컨스트럭터의 속성:

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

솔루션

를 사용하여 최소화에 필요한 주석을 자동으로 추가할 수 있습니다.

ng-annotate각도 추가 및 제거JS 종속성 주입 주석입니다.이것은 침입이 없기 때문에, 그 이외의 경우는 소스코드가 그대로 유지됩니다.코멘트 손실이나 회선 이동은 없습니다.

ng-annotate(현재는 권장되지 않는) 보다 빠르고 안정적이며 많은 도구용 플러그인을 갖추고 있습니다.

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

---

AngularJS 1.3부터에는 다음과 같은 새로운 파라미터가 있습니다.

앱 요소에 이 속성이 있으면 인젝터가 "sublic-di" 모드로 생성됩니다.즉, 어플리케이션은 Dependency Injection 가이드에서 설명한 바와 같이 명시적인 함수 주석을 사용하지 않는 함수(따라서 최소화에 적합하지 않음)를 호출하지 않으며, 유용한 디버깅 정보가 이러한 버그의 근원을 추적하는 데 도움이 됩니다.

나도 같은 에러가 났다.다만, 나에게 있어서 문제는 디렉티브의 컨트롤러 선언입니다.네가 대신 이걸 해야 해.

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

grunt, ngmin, uglife에서도 비슷한 문제가 있었습니다.

프로세스를 concat, ngmin, uglife 순으로 실행했습니다.

uglify 옵션 magle에 false를 추가할 때까지 각도에서 $injector 오류를 계속 받았습니다.그 후 모든 것이 수정되었습니다.

또한 다음과 같이 예외를 추가하려고 했습니다.

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

하지만 소용이 없었다...

자세한 설명을 위해 gruntFile.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']);

};

AndrewM96 제안ng-min맞아요.

얼라인먼트와 공백은 각도뿐만 아니라 Uglife에도 중요합니다.

저도 비슷한 문제가 있었어요.그리고 다음과 같은 방법으로 해결했다.uglife를 실행하기 전에 gulp-ng-annotate라는 Gulp 모듈을 실행해야 합니다.그래서 그 모듈을 설치합니다.

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

그런 다음 Gulpfile.js에서 요구 사항을 수행합니다.

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

그리고 usemin 태스크에서 다음과 같은 작업을 수행합니다.

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

그걸로 해결됐어요.

[편집: 오탈자 수정]

Uglife에는 특정 파일의 망글링을 비활성화하는 옵션이 있습니다.

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

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

많은 서비스 이름이 같기 때문에(대부분e 또는 a) 디버깅은 매우 어렵습니다.이렇게 하면 오류가 해결되지는 않지만, 코드 내의 위치를 추적하여 최종적으로 문제를 해결할 수 있는 미해결 서비스 이름을 얻을 수 있습니다.

들어가다lib/scope.js Uglife2 (Uglife2u of of of)node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/scope.js을 합니다.

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

와 함께

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

언급URL : https://stackoverflow.com/questions/17238759/angular-module-minification-bug