Angular.module minification बग

Question

न्यूनतम समय से यह पता लगाने की कोशिश की जा रही है कि खनन क्यों काम नहीं कर रहा है।

मैंने एक सरणी ऑब्जेक्ट के माध्यम से अपने प्रदाताओं को वेब पर कई सुझावों के अनुसार कार्य करने से पहले इंजेक्ट किया है और फिर भी "अज्ञात प्रदाता: 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);
    }])

कोई भी सुझाव बहुत बाध्य होगा!

Comments

अपने कोड को छोटा करने के लिए आप क्या उपयोग करते हैं? uglifyJS? यह भी देखें: github.com/btford/ngmin ;)

— आंद्रेएम 96

मैंने एनकमिन का उपयोग किया था, यह सब एक अलग सफेद अंतरिक्ष प्रारूप में कोड अप था। मैंने मिडलवेयर के रूप में एक्सप्रेस-क्रूसिफ़ाइल का उपयोग करने की कोशिश की, लेकिन यह काम नहीं कर रहा था इसलिए मैंने मैन्युअल रूप से ऑनलाइन क्रॉलर का उपयोग करने की कोशिश की। किसी भी तरह से कोड समाप्त हो गया।

— BPWDevelopment

इसके अलावा, वहाँ एक लापता नहीं है ]? (समापन से पहले ))

— आंद्रेएम 96

वहाँ था, मैं उन्हें इस विशेष स्निपेट में भूल गया। यह इस तथ्य को नहीं बदलता है "अज्ञात प्रदाता" अभी भी होता है :(

— BPWDevelopment

ठीक है, आप किस ऑनलाइन मिनीफ़ायर का उपयोग करते हैं? यह आपके कोड के साथ ठीक काम करता है: marijnhaverbeke.nl/uglifyjs

— AndreM96

Answer 1

मैं Grunt.js Uglify प्लगइन के साथ इस समस्या में भाग गया ।

विकल्पों में से एक mangle हैं

uglify: {
  options: {
    mangle: false
  },

मेरा मानना ​​है कि "स्ट्रिंग्स की तरह" पर रेगेक्स फ़ंक्शंस चलाता है और उन्हें मिनीफ़िज़ करता है।

उदाहरण के लिए:

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

बन जाएगा:

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

इसे अक्षम करें --- यह सुविधा कोणीय के साथ अच्छा नहीं खेलती है।

संपादित करें:

@JoshDavidMiller के रूप में अधिक सटीक होने के लिए बताते हैं:

mangleकेवल चर जैसे मंगल को उलझाएं , जो वास्तव में AngularJS समस्या का कारण बनता है। यही है, समस्या इंजेक्शन में है और परिभाषा नहीं है।

function MyCtrl($scope, myService)के लिए आम हो जाएगा function MyCtrl(a, b), लेकिन एक स्ट्रिंग के अंदर सेवा परिभाषा को कभी नहीं बदलना चाहिए।

• दौड़ने ng-minसे पहले दौड़ना uglifyइस समस्या को हल करता है।

Comments

उसने अपना कोड अपडेट किया। उनकी समस्या यह नहीं थी कि "$ लोकेशनप्रोविडर" "बी" या ऐसा कुछ भी बन गया। यह सिर्फ काम नहीं किया। हालाँकि, इस उत्तर के लिए +1 :)

— आंद्रेएम 96

धन्यवाद उस विकल्प को खोजने में कठिन लग रहा था।

— रीन

मैं कोणीय बूटस्ट्रैप + योमन का उपयोग करते समय इस सटीक एक ही चीज़ में भाग गया। तुर्क कोणीय जनरेटर के उपयोग से यह एक ऐसी निर्मिति हुईdist जिसका उल्लेख निर्भरता त्रुटि "अज्ञात प्रदाता" के रूप में होगा। सेटिंग mangle: falseसे समस्या हल हो गई। (नोट: मुद्दा केवल डेवलपर के अनुकूल नहीं gruntनिर्मित में एक समस्या थी )distapp

— क्रेग

क्या mangle: true वास्तव में "स्ट्रिंग्स की तरह" मैनिंग करता है ? मुझे पूरा यकीन है कि यह केवल चर की तरह ही मंगल है , जो वास्तव में AngularJS समस्या का कारण है। यही है, समस्या इंजेक्शन में है और परिभाषा नहीं है। function MyCtrl($scope, myService)के लिए आम हो जाएगा function MyCtrl(a, b), लेकिन एक स्ट्रिंग के अंदर सेवा परिभाषा को कभी नहीं बदलना चाहिए। दौड़ने ng-minसे पहले दौड़ना uglifyइस समस्या को हल करता है, नहीं?

— जोश डेविड मिलर

ng-minअबng-annotate

— Atav32

Answer 2

मुसीबत

से AngularJS: खराब पार्ट्स :

कोणीय में एक निर्भरता इंजेक्टर है जो आपके मापदंडों के नाम के आधार पर आपके कार्य के लिए उपयुक्त वस्तुओं को पारित करेगा:

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

यहां, मापदंडों के नाम $scopeऔर $windowज्ञात नामों की सूची के साथ मिलान किया जाएगा, और संबंधित वस्तुओं को त्वरित रूप से प्राप्त किया जाता है और फ़ंक्शन को पास किया जाता है। कोणीय toString()फ़ंक्शन पर कॉल करके पैरामीटर नाम प्राप्त करता है, और फिर फ़ंक्शन परिभाषा को पार्स करता है।

इसके साथ समस्या यह है कि यह उस समय काम करना बंद कर देता है जब आप अपने कोड को छोटा करते हैं । चूंकि आप उपयोगकर्ता अनुभव के बारे में परवाह करते हैं, आप अपने कोड को छोटा करेंगे, इस प्रकार इस DI तंत्र का उपयोग करने से आपका ऐप टूट जाएगा। वास्तव में, डिबगिंग को आसान बनाने के लिए, और फिर उत्पादन या मंचन के लिए कोड को छोटा करने के लिए विकास में एक सामान्य विकास पद्धति का उपयोग किया जाता है। उस स्थिति में, यह समस्या तब तक उसके बदसूरत सिर को पीछे नहीं करेगी, जब तक आप उस बिंदु पर नहीं होते जहाँ वह सबसे अधिक दर्द करता है।

(...)

चूँकि यह निर्भरता इंजेक्शन तंत्र वास्तव में सामान्य स्थिति में काम नहीं करता है, इसलिए कोणीय भी एक तंत्र प्रदान करता है। सुनिश्चित करने के लिए, यह दो प्रदान करता है। आप या तो एक सरणी के साथ पास कर सकते हैं:

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

या आप $injectअपने निर्माता पर संपत्ति सेट कर सकते हैं:

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

समाधान

आप ng-annotateऑटो जोड़ने के लिए उपयोग कर सकते हैं एनोटेशन को छोटा करने के लिए आवश्यक:

ng-annotateजोड़ता है और हटाता है AngularJS निर्भरता इंजेक्शन एनोटेशन। यह गैर-घुसपैठ है इसलिए आपका स्रोत कोड बिल्कुल वैसा ही रहता है। कोई खोई हुई टिप्पणी या स्थानांतरित लाइनें नहीं।

ng-annotatengmin(जो अब पदावनत हो गया है) की तुलना में तेज और तेजस्वी है और इसमें कई उपकरणों के लिए प्लगइन्स हैं:

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

---

AngularJS 1.3 से शुरू होने वाले एक नए परम में भी ngAppकहा जाता है ngStrictDi:

यदि यह विशेषता एप्लिकेशन तत्व पर मौजूद है, तो इंजेक्टर "सख्त-दी" मोड में बनाया जाएगा। इसका मतलब यह है कि आवेदन ऐसे फ़ंक्शन को लागू करने में विफल होगा जो स्पष्ट फ़ंक्शन एनोटेशन का उपयोग नहीं करते हैं (और इस प्रकार minification के लिए अनुपयुक्त हैं), जैसा कि डिपेंडेंसी इंजेक्शन गाइड में वर्णित है , और उपयोगी डिबगिंग जानकारी इन बगों की जड़ को ट्रैक करने में सहायता करेगी।

Comments

+1 बस ग्रन्ट-एनजी-एनोटेट पर स्विच करने से यह समस्या ठीक हो जाती है और एनकैमिन को अब वैसे भी हटा दिया जाता है ताकि स्विच करने का एक और कारण हो।

— पियर-ल्यूक गेंड्रेउ

यह तय था कि मैं दिनों की तलाश में था!

— jack.the.ripper

मैं उसी समस्या का सामना कर रहा हूं, जो ब्राउज़राइज़, एंगुलर और गुल-मिनिफ़ के साथ एक मिनिफ़ाइड कोड का निर्माण कर रही है। मैंने gulp minify को हटा दिया है और इसे gulp-ng-annotate से बदल दिया है, कोड अभी भी छोटा है लेकिन फिर भी काम नहीं करता है।

— दिमित्री कोपरिवा

@BigDong यदि आप ब्राउजर का सबसे अच्छा तरीका इस्तेमाल कर रहे हैं, तो संभवत: ngStrictDi(कुछ ऐसा <div ng-app="myApp" ng-strict-di />) सक्षम gulp-ng-annotateकरें और अपने विकास के माहौल में भी इसका उपयोग करें ताकि आप आसानी से इन न्यूनतमीकरण कीड़ों को ट्रैक कर सकें।

— पाओलो मोरेटी

@PaoloMoretti मैंने ngStrictDi और gulp-ng-annotate के साथ प्रयास किया, ब्राउजर बंडल कर सकता है लेकिन कोड को छोटा नहीं किया गया है, क्या यह एनजी-एनोटेट नौकरी नहीं है?

— दिमित्री कोपरीवा

Answer 3

मुझे वही त्रुटि मिली। हालांकि, मेरे लिए, समस्या निर्देशों की नियंत्रक घोषणा है। आपको इसके बजाय ऐसा करना चाहिए।

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

Comments

शुक्रिया @angelokh! मुझे बिल्कुल यह समस्या थी। मैं controller: function ($scope) {}नोटेशन का उपयोग कर रहा था ।

— जब्बासो

यह mangle: falseअन्य प्रतिक्रियाओं में सुझाए गए वास्तविक समस्या के समाधान की तरह अधिक है , क्योंकि हम अभी भी नामों को सक्षम करने में सक्षम होना चाहते हैं।

— जब्बासो

Answer 4

मेरे पास ग्रंट, एनज़मिन और क्रॉइलिज़ का उपयोग करके एक समान मुद्दा था।

मैंने इस क्रम में प्रक्रिया चलाई: कॉन्कट, एनसीमिन, कुरूप

जब तक मैं बदसूरत विकल्पों में जोड़ नहीं लेता तब तक मुझे कोणीय से $ इंजेक्टर त्रुटि प्राप्त करना जारी था: गलत - फिर सब कुछ तय हो गया था।

मैंने इस तरह के अपवादों को जोड़ने की कोशिश की:

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

};

Comments

एएच थैंक यू थैंक यू! इसने मुझे बहुत समय बचाया है।

— माइलस्क

Answer 5

एंड्रयूएम 96 का सुझाव ng-min सही है।

एलाइनमेंट और व्हाइट स्पेस Uglify के साथ-साथ कोणीय के लिए भी मायने रखता है।

Comments

एनजी-मिन कोणीय फ़ाइलों को संसाधित करने के लिए प्रतीत होता है ताकि वे अनुकूल हों uglify। हमारी निर्माण प्रक्रिया में हम दोनों ( ng-minपहले uglify) का उपयोग करते हैं और अभी भी बदसूरत js के साथ एक मुद्दा था।

— क्रेग

यह उत्तर के रूप में क्यों चिह्नित है? (इसके अलावा, एंड्रयूएम 96 आंद्रेएम 96 होना चाहिए)

— जे

हालांकि डॉक्स एनजी-मिन ध्वनियों में यह वादा करता है कि यह समस्या का समाधान नहीं करता है

— विशेष 0

@ क्रेगब को एक ही समस्या है। शायद यह चीजों का एक संयोजन है। मैं आवश्यकता के रूप में अच्छी तरह से का उपयोग करें। मैं मूल रूप से सभी फ़ंक्शन-चेंजिंग-सामान एनजी-मिन को खुद करना चाहिए और अभी भी एनजी-मिन को चलाने के लिए, रन की आवश्यकता से निर्माण और रन के साथ मैकलिंग के साथ सच है। यह प्रक्रिया अधिकांश समय काम करती है।

— भाग निकले

Answer 6

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था। और इसे निम्न तरीके से हल किया। इससे पहले कि हम बदसूरत हों, हमें गुल-एनजी-एनोटेट नामक एक गुल मॉड्यूल चलाना होगा। तो हम उस मॉड्यूल को स्थापित करते हैं

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

फिर गुलफिले.जेएस में आवश्यकता को पूरा करें

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

और अपने usemin कार्य में कुछ इस तरह से करते हैं

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

यह मेरे लिए हल है।

[संपादित करें: फिक्स्ड टाइपोस]

Comments

gulp-MG-annotate gulp-NG-annotate होना चाहिए?

— हाल ही में

हाँ, गलती के लिए क्षमा करें। जहाँ mg-annotateहमेशा लिखा रहता हैng-annotate

— पाउलो बोराल्हो मार्टिन्स 8

Answer 7

Uglify के पास विशिष्ट फ़ाइलों पर मैनबलिंग को अक्षम करने का विकल्प है:

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

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

Comments

'angualr' को जोड़ने से समस्या ठीक नहीं हुई। यह एक पूर्व निर्धारित नहीं है।

— special0ne

Answer 8

यह डीबग करना बहुत मुश्किल है क्योंकि बहुत सारी सेवाओं को एक ही नाम दिया गया है (ज्यादातर ई या ए)। यह त्रुटि को हल नहीं करेगा, लेकिन आपको अनसुलझे सेवा का नाम प्रदान करेगा जो आपको ट्रैक करने में सक्षम बनाता है, कुरूप आउटपुट में, कोड में स्थान और अंत में आपको समस्या को हल करने में सक्षम बनाता है:

lib/scope.jsUglify2 ( 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++