Memiliki terhebat waktu mencoba untuk mencari tahu mengapa minification tidak bekerja.
Saya telah disuntikkan melalui array objek saya penyedia sebelum fungsi per banyak saran di web dan masih belum "tidak Diketahui penyedia: aProvider < -"
Regular:
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);
}])
Minified:
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);
}])
Setiap saran akan sangat berterima kasih!
Aku berlari ke dalam masalah ini sebelum dengan Grunt.js Uglify plugin.
Salah satu pilihan adalah mangle
uglify: {
options: {
mangle: false
},
Yang saya percaya menjalankan fungsi regex pada "seperti string" dan minifys mereka.
Misalnya:
angular.module("imgur", ["imgur.global","imgur.album"]);
Akan menjadi:
angular.module("a", ["a.global","a.album"]);
Menonaktifkannya --- fitur ini doesn't bermain bagus dengan Sudut.
Untuk lebih tepat sebagai @JoshDavidMiller menjelaskan:
Uglify mangle
hanya mangles seperti variabel, yang adalah apa yang benar-benar menyebabkan AngularJS masalah. Artinya, masalahnya adalah di injeksi dan bukan definisi.
fungsi MyCtrl($ruang lingkup, myService)
akan mendapatkan hancur fungsi MyCtrl(a, b)
, tapi layanan definisi dalam string tidak boleh diubah.
ng-min
sebelum menjalankan uglify
memecahkan masalah ini.Dari AngularJS: Bagian Yang Buruk:
Sudut memiliki built in ketergantungan injector yang akan lulus tepat benda-benda untuk fungsi anda berdasarkan nama-nama parameter:
fungsi MyController($ruang lingkup, $jendela) { // ... }
di Sini, nama-nama parameter
$lingkup
dan$jendela
akan dicocokan dengan daftar nama-nama terkenal, dan benda-benda yang sesuai mendapatkan instantiated dan dilewatkan ke fungsi. Sudut mendapat parameter nama panggilantoString()
pada fungsi, dan kemudian parsing definisi fungsi.masalah dengan hal ini, tentu saja, adalah bahwa hal itu berhenti bekerja saat anda mengecilkan kode anda. Karena anda peduli tentang pengalaman pengguna anda akan meminimalisasi kode anda, jadi menggunakan ini DI mekanisme akan break aplikasi anda. Bahkan, umum pengembangan metodologi adalah dengan menggunakan unminified kode dalam pengembangan untuk memudahkan debugging, dan kemudian untuk mengecilkan kode ketika mendorong untuk produksi atau pementasan. Dalam kasus ini, masalah tidak belakang kepalanya yang buruk sampai anda berada pada titik di mana itu yang paling menyakitkan.
(...)
Karena ini dependency injection mekanisme tidak benar-benar bekerja di kasus umum, Sudut juga menyediakan mekanisme yang tidak. Untuk memastikan, ini menyediakan dua. Anda dapat menyampaikan sebuah array seperti:
modul.controller('MyController', ['$ruang lingkup', '$jendela', MyController]);
Atau anda dapat mengatur
$inject
properti pada constructor:MyController.$inject = ['$ruang lingkup', '$jendela'];
Anda dapat menggunakan ng-keterangan
untuk auto menambahkan anotasi diperlukan untuk meminimalisasi:
ng-anotasi
menambah dan menghapus AngularJS dependency injection penjelasan. Ini adalah non-intrusif sehingga kode sumber anda tetap persis sama lain. Tidak ada yang hilang komentar atau pindah jalur.
ng-anotasi
adalah lebih cepat dan lebih stabil dari ngmin
(yang sekarang sudah ditinggalkan) dan memiliki plugin untuk banyak alat-alat:
Mulai dari AngularJS 1.3 sana's juga baru param di ngApp
disebut ngStrictDi
:
jika atribut ini hadir di app elemen, injektor akan dibuat di "ketat-di" modus. Ini berarti bahwa aplikasi akan gagal untuk memanggil fungsi yang tidak menggunakan eksplisit fungsi penjelasan (dan dengan demikian tidak cocok untuk minification), seperti yang dijelaskan dalam Ketergantungan Injeksi panduan, dan berguna debugging info akan membantu dalam pelacakan akar dari bug ini.
Aku punya kesalahan yang sama. Namun, bagi saya, masalahnya adalah arahan' controller deklarasi. Anda harus melakukan ini sebaliknya.
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;
});
Aku punya masalah yang sama menggunakan grunt, ngmin dan uglify.
Aku berlari proses dalam urutan ini: concat, ngmin, uglify
Saya melanjutkan untuk mendapatkan $injector kesalahan dari sudut sampai aku menambahkan dalam uglify pilihan mangle: palsu - maka semuanya itu tetap.
Saya juga mencoba untuk menambahkan pengecualian untuk uglify seperti ini:
options: {
mangle: {
except: ['jQuery', 'angular']
}
}
Tapi tidak berhasil...
Di sini saya gruntFile.js untuk penjelasan lebih lanjut:
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 saran dari ng-min
adalah benar.
Keselarasan dan putih ruang untuk hal-hal Uglify serta Sudut.
Saya punya masalah yang sama. Dan dipecahkan dengan cara sebagai berikut. Kita perlu untuk menjalankan sebuah Tegukan modul yang disebut tegukan-ng-keterangan sebelum kita menjalankan uglify. Jadi kita menginstal modul
npm install gulp-ng-annotate --save-dev
Kemudian lakukan memerlukan di Gulpfile.js
ngannotate = require(‘gulp-ng-annotate’)
Dan di digunakanmin tugas melakukan sesuatu seperti ini
js: [ngannotate(), uglify(),rev()]
Bahwa soal itu bagi saya.
[EDIT: Fixed kesalahan ketik]
Ini sangat sulit untuk debug karena banyak layanan yang bernama sama (sebagian besar e atau a). Ini tidak akan menyelesaikan masalah, tapi akan memberikan anda dengan nama yang belum terselesaikan layanan yang memungkinkan anda untuk melacak, di uglified output, lokasi di kode dan akhirnya memungkinkan anda untuk memecahkan masalah ini:
Pergi ke lib/scope.js
dari Uglify2 (node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/scope.js
) dan ganti baris
this.mangled_name = this.scope.next_mangled(options);
dengan
this.mangled_name = this.name + "__debugging_" + counter++