Saya mengalami masalah tentang webpack: jika saya menyetel config.optimization.minimize: false, webpack menghasilkan file bundel yang tidak diperkecil (polyfill, vendor, dan aplikasi), lalu saya menjalankan server dan semuanya berfungsi dengan baik. Jika saya mengubah opsi ke config.optimization.minimize: false saya mendapatkan kesalahan AngularJS (1.7.9) berikut:

jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module saServer2App due to:
Error: [$injector:modulerr] Failed to instantiate module saServer2App.account due to:
Error: [$injector:unpr] Unknown provider: e


https://errors.angularjs.org/1.7.9/$injector/modulerr?p0=saServer2App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20saServer2App.account%20due%20to%3A%0AError%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.9%2F%24injector%2Fmodulerr%3Fp0%3DsaServer2App.account%26p1%3DError%253A%2520%255B%2524injector%253Aunpr%255D%2520Unknown%2520provider%253A%2520e%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.9%252F%2524injector%252Funpr%253Fp0%253De%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A837%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A23977%250A%2520%2520%2520%2520at%2520u%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25576)%250A%2520%2520%2520%2520at%2520s%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25881)%250A%2520%2520%2520%2520at%2520Object.invoke%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25969)%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25365)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25009%250A%2520%2520%2520%2520at%2520x%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A1529)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24869)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24955%250A%2520%2520%2520%2520at%2520x%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A1529)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24869)%250A%2520%2520%2520%2520at%2520We%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24189)%250A%2520%2520%2520%2520at%2520i%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A10341)%250A%2520%2520%2520%2520at%2520Object.Et%2520%255Bas%2520bootstrap%255D%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A10656)%250A%2520%2520%2520%2520at%2520HTMLDocument.%253Canonymous%253E%2520(http%253A%252F%252Flocalhost%253A9000%252Fapp.bundle.js%253A348%253A233259)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9000%252Flibs%252Fjquery.min.js%253A2%253A30005)%250A%2520%2520%2520%2520at%2520t%2520(http%253A%252F%252Flocalhost%253A9000%252Flibs%252Fjquery.min.js%253A2%253A30307)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A837%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A25194%0A%20%20%20%20at%20x%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A1529)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24869)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24955%0A%20%20%20%20at%20x%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A1529)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24869)%0A%20%20%20%20at%20We%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24189)%0A%20%20%20%20at%20i%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A10341)%0A%20%20%20%20at%20Object.Et%20%5Bas%20bootstrap%5D%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A10656)%0A%20%20%20%20at%20HTMLDocument.%3Canonymous%3E%20(http%3A%2F%2Flocalhost%3A9000%2Fapp.bundle.js%3A348%3A233259)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9000%2Flibs%2Fjquery.min.js%3A2%3A30005)%0A%20%20%20%20at%20t%20(http%3A%2F%2Flocalhost%3A9000%2Flibs%2Fjquery.min.js%3A2%3A30307)
    at vendor.6729935a0c85787ce014.bundle.js:895
    at vendor.6729935a0c85787ce014.bundle.js:5819
    at x (vendor.6729935a0c85787ce014.bundle.js:1144)
    at g (vendor.6729935a0c85787ce014.bundle.js:5779)
    at We (vendor.6729935a0c85787ce014.bundle.js:5696)
    at i (vendor.6729935a0c85787ce014.bundle.js:2719)
    at Object.Et [as bootstrap] (vendor.6729935a0c85787ce014.bundle.js:2740)
    at HTMLDocument.<anonymous> (app.js:74)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

Ini agak aneh, terutama bagi saya bahwa saya baru di AngularJS dan Webpack. Satu-satunya hal yang saya ubah di antara dua skenario hanyalah flag minimize. Apa yang bisa salah?

Jangan ragu untuk menanyakan beberapa bagian dari file/kode yang saya butuhkan.

0
kitsune 1 Juli 2020, 16:01

1 menjawab

Jawaban Terbaik

Injeksi ketergantungan AngularJs didasarkan pada nama argumen fungsi. Sebagai contoh:

class AuthService {
  constructor(otherService) {
  // ------------^ will inject otherService
  }
}

angular.module('my-app', []).service('authService', AuthService);

Masalahnya adalah ketika Anda mengecilkan kode Anda, minifier akan mengganti argumen fungsi menjadi sesuatu yang lebih pendek (biasanya satu karakter). Inilah yang terjadi dalam kasus Anda, ini menjelaskan mengapa sudut mencoba menyuntikkan e (Error: [$injector:unpr] Unknown provider: e).

Untuk mengatasi masalah ini, dukungan sudut notasi array yang mendefinisikan dependensi sebagai string.

// Given
const MyController = function (obfuscatedScope, obfuscatedRoute) {
  // ...
};

// Define function dependencies
MyController['$inject'] = ['$scope', '$route'];

Ada plugin webpack yang membuat anotasi secara otomatis, ng-annotate-webpack-plugin .

Ini menangani sebagian besar kasus, tetapi terkadang Anda perlu membantunya dengan menambahkan komentar khusus.

class AuthService {
  /* @ngInject */
  constructor(otherService) {
  // ------------^ will inject otherService
  }
}

angular.module('my-app', []).service('authService', AuthService);

Jika Anda pengguna babel, periksa plugin babel ini.

1
felixmosh 2 Juli 2020, 05:41