“Penyedia tidak dikenal: aProvider <- a” Bagaimana cara menemukan penyedia asli?

Saat saya memuat versi yang diperkecil (melalui UglifyJS) dari aplikasi AngularJS saya, saya mendapatkan kesalahan berikut di konsol:

Unknown provider: aProvider <- a

Sekarang, saya menyadari bahwa ini karena nama variabel mangling. Versi yang tidak diubah berfungsi dengan baik. Namun, saya tidak ingin menggunakan variabel nama mangling, karena secara drastis mengurangi ukuran file output JS kami.

Oleh karena itu, kami menggunakan ngmin dalam proses pembuatan kami, tetapi tampaknya tidak menyelesaikan masalah ini, meskipun ini membantu kami dengan baik di masa lalu.

Jadi, untuk men-debug masalah ini, saya mengaktifkan peta sumber di tugas grunt uglify kami. Mereka dihasilkan baik-baik saja dan Chrome tidak memuat peta dari server. Namun, saya masih mendapatkan pesan kesalahan tidak membantu yang sama, meskipun saya mendapat kesan bahwa sekarang saya harus melihat nama asli penyedia.

Bagaimana cara membuat Chrome menggunakan peta sumber untuk memberi tahu saya penyedia mana yang bermasalah di sini, atau, sebagai alternatif, bagaimana saya bisa mengetahui penyedia dengan cara lain?

Saya masih ingin tahu bagaimana saya dapat menemukan tempat di kode sumber kami yang menyebabkan masalah ini, tetapi sejak itu saya dapat menemukan masalahnya secara manual.

Ada fungsi pengontrol yang dideklarasikan pada cakupan global, alih-alih menggunakan .controller()panggilan pada modul aplikasi.

Jadi ada yang seperti ini:

function SomeController( $scope, i18n ) { /* ... */ }

Ini berfungsi dengan baik untuk AngularJS, tetapi untuk membuatnya berfungsi dengan benar dengan mangling, saya harus mengubahnya menjadi:

var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );

Setelah tes lebih lanjut, saya benar-benar menemukan contoh lebih banyak pengontrol yang juga menyebabkan masalah. Beginilah cara saya menemukan sumber semuanya secara manual :

Pertama-tama, saya menganggap cukup penting untuk mengaktifkan kecantikan keluaran dalam opsi uglify. Untuk tugas kasar kami yang berarti:

options : {
    beautify : true,
    mangle   : true
}

Saya kemudian membuka situs web proyek di Chrome, dengan DevTools terbuka. Yang menghasilkan kesalahan seperti yang di bawah ini sedang dicatat:

Metode dalam pelacakan panggilan yang kami minati, adalah yang saya tandai dengan panah. Ini providerInjectormasukinjector.js . Anda akan ingin menempatkan breakpoint di mana ia mengeluarkan pengecualian:

Saat Anda sekarang menjalankan ulang aplikasi, breakpoint akan terkena dan Anda dapat melompat ke tumpukan panggilan. Akan ada panggilan dari invokedalaminjector.js , dikenali dari string "Token injeksi salah":

The localsparameter (hancur ke ddalam kode saya) memberikan ide yang cukup baik tentang yang objek dalam sumber Anda adalah masalah:

Sekilas grepsumber kami menemukan banyak contoh modalInstance, tetapi pergi dari sana, mudah untuk menemukan tempat ini di sumber:

var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};

Yang harus diubah menjadi:

var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];

Jika variabel tidak menyimpan informasi yang berguna, Anda juga dapat melompat lebih jauh ke atas tumpukan dan Anda harus menekan panggilan invokeyang seharusnya memiliki petunjuk tambahan:

Cegah hal ini terjadi lagi

Sekarang setelah Anda menemukan masalahnya, saya merasa bahwa saya harus menyebutkan cara terbaik untuk menghindari hal ini terjadi lagi di masa mendatang.

Jelas, Anda bisa saja menggunakan anotasi larik sebaris di mana-mana, atau $injectanotasi properti (bergantung pada preferensi Anda) dan mencoba untuk tidak melupakannya di masa mendatang. Jika Anda melakukannya, pastikan untuk mengaktifkan mode injeksi ketergantungan ketat , untuk menangkap kesalahan seperti ini sedini mungkin.

Awas! Jika Anda menggunakan Angular Batarang, StrictDI mungkin tidak berfungsi untuk Anda, karena Angular Batarang menyuntikkan kode tanpa pemberitahuan ke akun Anda (Batarang buruk!).

Atau Anda bisa membiarkan ng-anotasi mengurusnya. Saya sangat merekomendasikan melakukannya, karena ini menghilangkan banyak potensi kesalahan di area ini, seperti:

• Anotasi DI hilang
• Anotasi DI tidak lengkap
• Anotasi DI dalam urutan yang salah

Menjaga anotasi tetap mutakhir hanya merepotkan dan Anda tidak perlu melakukannya jika dapat dilakukan secara otomatis. ng-annotate melakukan hal itu.

Ini harus terintegrasi dengan baik ke dalam proses build Anda dengan grunt-ng-annotate dan gulp-ng-annotate .

Tulisan Oliver Salzburg sangat fantastis. Suara positif.

Tip untuk siapa saja yang mungkin mengalami kesalahan ini. Milik saya hanya disebabkan oleh lupa untuk mengirimkan array untuk pengontrol direktif:

BURUK

return {
    restrict: "E",
    scope: {                
    },
    controller: ExampleDirectiveController,
    templateUrl: "template/url/here.html"
};

BAIK

return {
    restrict: "E",
    scope: {                
    },
    controller: ["$scope", ExampleDirectiveController],
    templateUrl: "template/url/here.html"
};

gunakan ng-strict-di dengan ng-app

Jika Anda menggunakan sudut 1,3 Anda dapat menyimpan sendiri dunia yang terluka dengan menggunakan ngStrictDi direktif dengan ngApp:

<html lang="en" ng-app="myUglifiablyGreatApp" ng-strict-di>

Sekarang - pra-minifikasi - apa pun yang tidak menggunakan anotasi akan meledakkan konsol Anda dan Anda dapat melihat nama sialan itu tanpa memburu melalui jejak tumpukan yang rusak.

Per dokumen:

aplikasi akan gagal menjalankan fungsi yang tidak menggunakan anotasi fungsi eksplisit (dan karenanya tidak cocok untuk minifikasi)

Satu peringatan , hanya mendeteksi bahwa ada yang penjelasan, tidak bahwa penjelasan lengkap.

Berarti:

['ThingOne', function(ThingA, ThingB) { … }]

Tidak akan menangkap bahwa ThingB bukan bagian dari anotasi.

Penghargaan untuk tip ini diberikan kepada orang - orang ng-anotasi , yang direkomendasikan daripada ngMin yang sekarang sudah usang.

Untuk memperkecil sudut, yang perlu Anda lakukan adalah mengubah deklarasi Anda ke mode "deklarasi" "array", misalnya:

Dari:

var demoApp= angular.module('demoApp', []);
demoApp.controller(function demoCtrl($scope) {
} );

Untuk

var demoApp= angular.module('demoApp', []);
demoApp.controller(["$scope",function demoCtrl($scope) {
}]);

Bagaimana cara mendeklarasikan layanan pabrik?

demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {
    return {
          //some object
    };
}]);

Saya baru saja mengalami masalah yang sama dan menyelesaikannya hanya dengan mengganti ngmin (sekarang sudah tidak digunakan lagi) dengan ng-annotate untuk tugas build grunt saya.

Tampaknya sudut yeoman juga telah diperbarui untuk menggunakan ng-annotate pada komit ini: https://github.com/yeoman/generator-angular/commit/3eea4cbeb010eeaaf797c17604b4a3ab5371eccb

Namun jika Anda menggunakan yeoman angular versi lama seperti saya, ganti saja ng-min dengan ng-annotate di package.json Anda:

-    "grunt-ngmin": "^0.0.3",
+    "grunt-ng-annotate": "^0.3.0",

jalankan npm install(lalu opsional npm prune), dan ikuti perubahan dalam komit untuk mengedit Gruntfile.js.

untuk mengetahui apa nama variabel aslinya, Anda dapat mengubah cara uglify menghapus variabel:

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name;
    [...]
  }
};

dan sekarang kesalahannya jauh lebih jelas

Error: [$injector:unpr] Unknown provider: a_orig_$stateProvider
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=a_orig_%24stateProvider
at eval (eval at <anonymous> (http://example.com/:64:17), <anonymous>:3155:20)

EDIT

Sangat jelas sekarang ...

Gruntfile.js

uglify: {
  example: {
    options: {
      beautify: true,
      mangle: true
    },
    [...]
  },
  [...]
}

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

var numberOfVariables = 1;
SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name+"_"+numberOfVariables++;
    [...]
  }
};

sekarang setiap variabel dihancurkan menjadi nilai unik yang juga berisi yang asli ... cukup buka javascript yang diperkecil dan cari "a_orig_ $ stateProvider_91212" atau apa pun ... Anda akan melihatnya dalam konteks aslinya ...

tidak bisa lebih mudah ...

Juga jangan lupakan resolveproperti rutenya. Itu juga harus didefinisikan sebagai array:

$routeProvider.when('/foo', {
    resolve: {
        bar: ['myService1', function(myService1) {
            return myService1.getThis();
        }],
        baz: ['myService2', function(myService2) {
            return myService2.getThat();
        }]
    }
});

Dengan generator-gulp-angular:

   /** @ngInject */
    function SomeController($scope, myCoolService) {

}

Tulis / ** @ngInject * / sebelum setiap pengontrol, layanan, direktif.

Perbaikan cepat dan kotor untuk ini jika Anda tidak memerlukan Uglify untuk mengacaukan / mempersingkat nama variabel Anda adalah dengan menyetel mangle = false di Gruntfile Anda

    uglify: {
        compile: {
            options: {
                mangle   : false,
                ...
            },
        }
    }