Бұрылмалы модуль минифлинг қатесі

Қызығушылығын тудырмайтынын түсінуге тырысып, уақытты жұмсап отыр.

I have injected via an array object my providers prior the function per numerous suggestions across the web and yet still "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);
    }])

Кез келген ұсыныс өте көп болар еді!

80
Жақсы, сіз қандай онлайн миниферді қолдандыңыз? Бұл сіздің кодыңызбен жақсы жұмыс істейді: marijnhaverbeke.nl/uglifyjs
қосылды автор AndreM96, көзі
Сондай-ақ, жоқ ] жоқ? () )
қосылды автор AndreM96, көзі
Кодты минимизациялау үшін не пайдаланасыз? uglifyJS? Сонымен қатар: github.com/btford/ngmin ;)
қосылды автор AndreM96, көзі
[Ұрлай және минифирлеуді пайдалану] [1] [1]: stackoverflow.com/a/24215002/2371560
қосылды автор ssoward, көзі
қосылды автор BPWDevelopment, көзі
Бұл кодты ыңғайсыз етеді. Мен осылай қолдандым. Мәселе тек қана дұрыс жазылмаған және «а» провайдерін таба алмайтынын айтады.
қосылды автор BPWDevelopment, көзі
Міне, осы үзіндіде оларды ұмытып кеттім. Ол «белгісіз провайдер» фактісін өзгертпейді :(
қосылды автор BPWDevelopment, көзі
Мен ngmin пайдаландым, бәрі басқаша ақ кеңістіктегі форматта кодты құрады. Экспресс-ойлауды аралық бағдарлама ретінде қолдануға тырыстым, бірақ ол жұмыс істемей тұрды, сондықтан мен онлайн құлатқышты қолмен пайдаланып көрдім. Кез келген жағдайда кодекс бірдей аяқталды.
қосылды автор BPWDevelopment, көзі

8 жауаптар

Мен осы мәселеге дейін Grunt.js Ұнамды плагинімен жүгірдім.

One of the options are mangle

uglify: {
  options: {
    mangle: false
  },

Менің ойымша, regex функциялары «strings сияқты» жұмыс істейді және оларды азайтады.

Мысалға:

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

Болады:

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

Өшіру --- бұл мүмкіндік бұрышпен жақсы ойнайды.

Өңдеу:

@JoshDavidMiller түсіндіреді, дәлірек айтқанда:

mangle түртіндісін айнымалы мәндер сияқты тек қана мәжбүрлейді, бұл шын мәнінде AngularJS мәселесін тудырады. Яғни проблема инъекцияға жатады және анықталмайды.

function MyCtrl($scope, myService) would get mangled to function MyCtrl(a, b), but the service definition inside of a string should never get altered.

  • uglify қолданбас бұрын ng-min іске қосылса, бұл мәселені шешеді.
138
қосылды
Жақсы! Үлкен жұмыс!
қосылды автор Calvin Froedge, көзі
@Dan Kanze Фантастикалық, мен үшін жұмыс істеді. Спасибо :)
қосылды автор Mik378, көзі
Мен бұрыштық bootstrap + yeoman пайдалану кезінде дәл осындай нәрсеге жүгірдім. yeoman бұрыштық генераторды пайдаланып, dist құралын жасады аталған тәуелділік қатесі «Белгісіз жеткізуші». mangle: false параметрін орнату мәселені шешті. (Ескерту: мәселе тек grunt салынған dist жүйесінде қиындық туғызды, әзірлеушіге арналған app құрастырушы емес)
қосылды автор craigb, көзі
Мен мангланы шындыққа орнатуға кеңес бермеймін. Қате туралы қандай бұрыштықты тексеру керек: docs.angularjs.org/ tutorial/step_05 # а-ескерту-миниатия . Бұл маған үлкен бұрыштық бағдарламада жұмыс істеді.
қосылды автор ingaham, көзі
mangle: true шынымен манго «жолдар сияқты» ма? Мен айнымалылар сияқты сияқты тек қана мучительно екеніне сенімдімін, бұл шын мәнінде AngularJS мәселесін тудырады. Яғни проблема инъекцияға жатады және анықталмайды. функциясы MyCtrl ($ scope, myService) функциясы MyCtrl (a, b) функциясына араласады, бірақ жолдың ішіндегі қызмет анықтамасы ешқашан өзгертілмеуі керек. uglify қолданбас бұрын ng-min іске қосылса, бұл мәселені шешеді, жоқ па?
қосылды автор Josh David Miller, көзі
Ол өзінің кодын жаңартты. Оның проблемасы «$ locationProvider» болды «b» немесе сол сияқты. Бұл жай ғана жұмыс істемеді. Дегенмен, бұл жауап үшін +1 :)
қосылды автор AndreM96, көзі
Осы опцияны табу үшін рахмет болды.
қосылды автор reen, көзі
ng-min енді ng-annotate < код>
қосылды автор Atav32, көзі
Магнит белгілеу үшін углевая нысанды қай жерде жаңартатын едім: жалған?
қосылды автор BPWDevelopment, көзі
Мен үшін жұмыс істеді! рахмет
қосылды автор Jacob, көзі

Мәселе

AngularJS: The Bad Parts бөлімінен:

Angular has a built in dependency injector that will pass appropriate objects to your function based on the names of its parameters:

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

Here, the names of the parameters $scope and $window will be matched against a list of known names, and corresponding objects get instantiated and passed to the function. Angular gets the parameter names by calling toString() on the function, and then parsing the function definition.

The Мәселе with this, of course, is that it stops working the moment you minify your code. Since you care about user experience you will be minifying your code, thus using this DI mechanism will break your app. In fact, a common development methodology is to use unminified code in development to ease debugging, and then to minify the code when pushing to production or staging. In that case, this Мәселе won’t rear its ugly head until you’re at the point where it hurts the most.

(...)

Since this dependency injection mechanism doesn’t actually work in the general case, Angular also provides a mechanism that does. To be sure, it provides two. You can either pass along an array like so:

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

Or you can set the $inject property on your constructor:

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

Шешім

Кішірейтуге қажетті аннотацияларды автоматты түрде қосу үшін ng-annotate пайдалануыңызға болады:

ng-annotate AngularJS тәуелділік инъекциясын қосады және жояды   аннотациялар. Бастапқы кодын дәл осылай сақтайды, сондықтан ол интрузивті емес   басқаша. Жоғалған түсініктемелер немесе көшіру сызығы жоқ.

ng-annotate is faster and stabler than ngmin (which is now deprecated) and it has plugins for many tools:


AngularJS 1.3 нұсқасынан бастап деп аталатын ngApp ngStrictDi :

егер бұл төлсипат қолданба элементінде болса, инжектор болады   «strict-di» режимінде жасалған. Бұл қолданба сәтсіз болады дегенді білдіреді   нақты функционалды аннотацияны қолданбайтын функцияларды шақыру (және   осылайша, minification үшін жарамсыз), Тәуелділікте сипатталғандай   Инъекцияға арналған нұсқаулық және пайдалы отладка туралы ақпарат қадағалауға көмектеседі   бұл қателердің түбірінен төмен.

49
қосылды
бұл күндерді іздеп жүрген түзету болды!
қосылды автор jack.the.ripper, көзі
+1 ng-аннотация маған да қатысты мәселені шешті :)
қосылды автор nacholibre, көзі
@BigDong, браузерді қолдансаңыз, ең жақсы әдіс ngStrictDi (мысалы, <div ng-app = «myApp» ng-strict-di /> ) сондай-ақ сіздің әзірлеу ортаңызда gulp-ng-annotate сөзін қолданыңыз.
қосылды автор Paolo Moretti, көзі
@Willa жүктеуге тырысатын тәуелділіктің шын мәнінде минификацияланған байланысы бар екеніне көз жеткізіңіз.
қосылды автор Paolo Moretti, көзі
Мен браузермен, бұрышпен және гульп-минифтпен кішігірім кодты құруда бірдей проблемаға тап боламын. Мен gulp minify параметрін жойып, оны gulp-ng-annotate арқылы алмастырдым, код әлі де минифилизацияланды, бірақ әлі жұмыс істемейді.
қосылды автор BigDong, көзі
@PaoloMoretti Мен ngStrictDi және gulp-ng-annotate-мен тырыстық, браузерді байланыстыра аламын, бірақ коды кішкентай емес, ng-annotate job болуы керек емес пе?
қосылды автор BigDong, көзі
Мен контроллерімді келесідей жасаймын: .controller ('SomeCtrl', '$ scope', someCtrl функциясы ($ scope) bundle.js файлының ішіне қарағаннан кейін gulp-ng-annotate ешқандай өзгерісті көре алмаймын Мен тек плагинді алып тастадым
қосылды автор BigDong, көзі
+1 Сұрақ-түсініктеме-түсіндірмелерге ауысыңыз, бұл мәселе бекітілді және ngmin енді кез-келген жағдайда ескірді, осылайша ауыстыруға тағы бір себеп бар.
қосылды автор Pier-Luc Gendreau, көзі
MyController қолданамыз, $ inject = [], бірақ әлі жұмыс істемейді. Мәселе қандай болуы мүмкін! Біз тіпті ng-annotate-ді табысты пайдаланбаймыз. Бұған себеп болуы мүмкін тағы бір нәрсе бар ма?
қосылды автор Willa, көзі
@PaoloMoretti кешіктірілген жауап үшін өкінішті. Бізде бұл мәселе әлі де бар. Шын мәнінде біз барлық тәуелділікті өте жақсы жүктейміз. Мен тіпті барлық файлдардың кішірейтілген нұсқасын қарап шығып, контроллердің анықталғанын және бұрышпен тіркелгенін көрдім. Мен тіпті ауыспалы тоқтауды өшіруге тырыстым, бірақ әлі күнге дейін қолданбаның минифицирленген нұсқасын жұмыс істей алмаймын.
қосылды автор Willa, көзі
Ng-strict-di өзекті мәселемді қосып, рахмет!
қосылды автор Kris Boyd, көзі

Менде қате болды. Дегенмен, мен үшін директивалар контроллерінің декларациясы болып табылады. Мұны орнына қою керек.

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

21
қосылды
Сіз менің күнімді жасадым
қосылды автор clopez, көзі
Рахмет сізге @angelokh! Маған осы мәселе дәл келді. Мен controller: function ($ scope) {} белгілерін қолдандым.
қосылды автор jbasko, көзі
Бұл басқа жауаптарда ұсынылған mangle: false -дан гөрі нақты мәселені шешуге ұқсас, себебі біз әлі де атауларды алмастырғымыз келеді.
қосылды автор jbasko, көзі

Менің ойымша, осындай мәселе болды grunt, ngmin және uglify.

Мен осы тәртіпте процесті жүргіздім: concat, ngmin, uglify

Мен $ инжекторлық қателікті бұрыштан бастап, мен бұғаттау опцияларын қосқанша жалғастыра бердім: жалған - содан кейін бәрі бекітілді.

Сондай-ақ, мен бұған ұнамсыздықты алып тастауға тырыстым:

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

Бірақ ешқандай пайда жоқ ...

Бұдан әрі түсіндіру үшін my 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']);

};

9
қосылды
Бұл маған фантастикалық рахмет айқындады
қосылды автор Gurnard, көзі
Менің минифилизация мәселемді тіркедім, рахмет!
қосылды автор Benoit Wickramarachi, көзі
AH Сізге ризашылық білдіреміз! бұл маған көп уақытты үнемдеді.
қосылды автор mylescc, көзі

ng-min деген AndrewM96 ұсынысы дұрыс.

Тегістеу және ақ кеңістік Ұшқышқа, сондай-ақ бұрыштыққа арналған.

5
қосылды
бірақ құжаттардағы ng-min дыбыстары бұл мәселені шешпейтініне уәде етеді
қосылды автор special0ne, көзі
ng-min бұрыштық файлдарды өңдейді, сондықтан олар uglify . Біздің құрастыру үрдісінде екеуін де қолданамыз ( ng-min дейін uglify ) және әлі де бүлінген JS мәселесі болған.
қосылды автор craigb, көзі
Сол мәселеге ие @craigb. Бәлкім, бұл заттардың тіркесімі. Мен сондай-ақ RequireJS-ды қолдана аламын. Мен, негізінен, барлық функционалды-өзгеретін элементтерді ng-min жасау керек, және ng-min іске қосылуы керек, бұл іске қосуды қажет етеді және манжа шынымен жұмыс істемейді. Бұл процесс көбінесе жұмыс істейді.
қосылды автор escapedcat, көзі
Неге бұл жауап ретінде белгіленді? (Сондай-ақ AndrewM96 AndreM96 болуы тиіс)
қосылды автор Jay, көзі

Менде осындай проблема болды. Және келесі жолы шешілді. Біз гулп-нг-аннотация деп аталатын Гулеп модулін іске қосуымыз керек. Сол модульді орнатамыз

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

Содан кейін Gulpfile.js ішіндегі талапты орындаңыз

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

Және сенің тапсырмаңызда осындай нәрсені жасайық

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

Бұл мен үшін шешті.

[EDIT: Тіркелген үлгілер]

3
қосылды
gulp-MG-annotate gulp-NG-annotate болуы керек пе?
қосылды автор hally9k, көзі
Ия, қатені кешіріңіз. mg-annotate деп оқылатын жерде әрдайым ng-annotate
қосылды автор Paulo Borralho Martins, көзі

Uglify арнайы файлдарда күйдіруді өшіруге мүмкіндік бар:

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

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

2
қосылды
«angualr» қосу мәселені шешпеді. Бұл алдын-ала дайын емес.
қосылды автор special0ne, көзі

Бұл өте көп қиындықтар тудырады, өйткені көптеген қызметтер бірдей (негізінен e немесе a). Бұл қатені шешпейді, бірақ шешілмеген қызметтің атын қамтамасыз етеді , бұл сізді төмендегіні, шығарылған шығуда, кодының орналасқан жерін қадағалауға мүмкіндік береді және ақырында мәселені шешуге мүмкіндік береді :

Uglify2 ( node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/scope.js ) ішіндегі lib/scope.js бөліміне өтіп,

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

бар

this.mangled_name = this.name + "__debugging_" + counter++
2
қосылды