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
을 사용하다
문제
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
(현재는 권장되지 않는) 보다 빠르고 안정적이며 많은 도구용 플러그인을 갖추고 있습니다.
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
'bestsource' 카테고리의 다른 글
2개의 json 객체의 차이 가져오기 (0) | 2023.03.20 |
---|---|
각도 UI 대 각도 스트랩 (0) | 2023.03.20 |
채팅 상자에서 아래로 스크롤(angularjs) (0) | 2023.03.15 |
React.Component vs React.createClass (0) | 2023.03.15 |
실행 방법c#을 사용한SQL 스크립트파일 (0) | 2023.03.15 |