“ Uncaught Error: [$ injector: unpr]” ที่มีมุมหลังการปรับใช้

ฉันมีแอปพลิเคชัน Angular ที่ค่อนข้างเรียบง่ายซึ่งทำงานได้ดีบนเครื่อง dev ของฉัน แต่ล้มเหลวด้วยข้อความแสดงข้อผิดพลาดนี้ (ในคอนโซลเบราว์เซอร์) หลังจากที่ฉันปรับใช้:

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20%24http%20%3C-%20%24compile

ไม่มีข้อความอื่นนอกเหนือจากนั้น เกิดขึ้นเมื่อโหลดหน้าเว็บครั้งแรก

ฉันใช้ ASP.NET MVC5, Angular 1.2RC3 และกดไปที่ Azure ผ่าน git

Googling ไม่ได้เปิดเผยสิ่งที่น่าสนใจ

ข้อเสนอแนะใด ๆ ?

แก้ไข:

ฉันใช้ TypeScript และกำหนดการอ้างอิงของฉันด้วย$injectตัวแปรเช่น:

export class DashboardCtrl {

    public static $inject = [
        '$scope',
        '$location',
        'dashboardStorage'
    ];

    constructor(
        private $scope: IDashboardScope,
        private $location: ng.ILocationService,
        private storage: IDashboardStorage) {
    }
}

ฉันเชื่อว่าควร (หรือมีวัตถุประสงค์เพื่อ) แก้ไขปัญหาการเปลี่ยนชื่อตัวแปรท้องถิ่นที่เกิดขึ้นระหว่างการลดขนาดและอาจทำให้เกิดข้อผิดพลาดนี้

ที่กล่าวว่ามีบางอย่างเกี่ยวข้องกับกระบวนการลดขนาดอย่างชัดเจนเช่นเมื่อฉันตั้งค่าBundleTable.EnableOptimizations = trueบนเครื่อง dev ฉันสามารถสร้างซ้ำได้

หากคุณไปที่ลิงค์ของคุณจะบอกคุณว่าข้อผิดพลาดเป็นผลมาจาก $ injector ไม่สามารถแก้ไขการอ้างอิงของคุณได้ นี่เป็นปัญหาทั่วไปเกี่ยวกับเชิงมุมเมื่อจาวาสคริปต์ถูกย่อ / อัปลักษณ์ / ไม่ว่าคุณจะทำอะไรเพื่อการผลิต

ปัญหาคือเมื่อคุณมีเช่นคอนโทรลเลอร์

angular.module("MyApp").controller("MyCtrl", function($scope, $q) {
  // your code
})

การลดขนาดจะเปลี่ยนไป$scopeและ$qเป็นตัวแปรสุ่มที่ไม่ได้บอกเชิงมุมว่าจะฉีดอะไร วิธีแก้ปัญหาคือการประกาศการอ้างอิงของคุณดังนี้:

angular.module("MyApp")
  .controller("MyCtrl", ["$scope", "$q", function($scope, $q) {
  // your code
}])

ที่ควรแก้ไขปัญหาของคุณ

เพียงแค่ทบทวนซ้ำทุกสิ่งที่ฉันได้กล่าวไว้จะอยู่ที่ลิงก์ที่ข้อความแสดงข้อผิดพลาดให้คุณ

พบปัญหาเดียวกันกับตัวเอง แต่คำจำกัดความตัวควบคุมของฉันดูแตกต่างจากข้างบนเล็กน้อย สำหรับคอนโทรลเลอร์ที่กำหนดไว้เช่นนี้:

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

เพียงเพิ่มบรรทัดหลังการประกาศเพื่อระบุว่าวัตถุใดที่จะฉีดเมื่อตัวควบคุมถูกสร้างอินสแตนซ์:

function MyController($scope, $http) {
    // ...
}
MyController.$inject = ['$scope', '$http'];

สิ่งนี้ทำให้การลดขนาดเล็กลง - ปลอดภัย

ปัญหานี้เกิดขึ้นเมื่อไม่ได้ระบุตัวควบคุมหรือคำสั่งเป็นอาร์เรย์ของการอ้างอิงและฟังก์ชัน ตัวอย่างเช่น

angular.module("appName").directive('directiveName', function () {
    return {
        restrict: 'AE',
        templateUrl: 'calender.html',
        controller: function ($scope) {
            $scope.selectThisOption = function () {
                // some code
            };
        }
    };
});

เมื่อย่อขนาด '$ ขอบเขต' ที่ส่งผ่านไปยังฟังก์ชันคอนโทรลเลอร์จะถูกแทนที่ด้วยชื่อตัวแปรอักษรตัวเดียว สิ่งนี้จะทำให้เกิดการพึ่งพาเชิงมุม เพื่อหลีกเลี่ยงสิ่งนี้ให้ส่งชื่ออ้างอิงพร้อมกับฟังก์ชันเป็นอาร์เรย์

angular.module("appName").directive('directiveName', function () {
    return {
        restrict: 'AE',
        templateUrl: 'calender.html'
        controller: ['$scope', function ($scope) {
            $scope.selectThisOption = function () {
                // some code
            };
        }]
    };
});

หากคุณได้แยกไฟล์สำหรับ angular app \ resources \ directives และสิ่งอื่น ๆ คุณสามารถปิดการใช้งานการลดขนาดของชุดแอปเชิงมุมของคุณได้เช่นนี้ (ใช้ Bundle ใหม่ () แทน ScriptBundle () ในไฟล์กำหนดค่าบันเดิลของคุณ):

bundles.Add(
new Bundle("~/bundles/angular/SomeBundleName").Include(
               "~/Content/js/angular/Pages/Web/MainPage/angularApi.js",
               "~/Content/js/angular/Pages/Web/MainPage/angularApp.js",
               "~/Content/js/angular/Pages/Web/MainPage/angularCtrl.js"));

และแอปเชิงมุมจะปรากฏในกลุ่มที่ไม่มีการแก้ไข

หากคุณได้แยกไฟล์สำหรับ angular app \ resources \ directives และสิ่งอื่น ๆ คุณสามารถปิดการใช้งานการลดขนาดของชุดแอปเชิงมุมของคุณได้เช่นนี้ (ใช้ Bundle ใหม่ () แทน ScriptBundle () ในไฟล์กำหนดค่าบันเดิลของคุณ):

เพิ่มบริการ $ http, $ ขอบเขตใน fucntion ตัวควบคุมบางครั้งหากไม่มีข้อผิดพลาดเหล่านี้จะเกิดขึ้น

ฉันมีปัญหาเดียวกัน แต่ปัญหาแตกต่างออกไปฉันพยายามสร้างบริการและส่ง $ scope ไปให้เป็นพารามิเตอร์
นั่นเป็นอีกวิธีหนึ่งในการรับข้อผิดพลาดนี้เนื่องจากเอกสารของลิงก์นั้นระบุว่า:

ความพยายามที่จะฉีดวัตถุขอบเขตลงในสิ่งที่ไม่ใช่ตัวควบคุมหรือคำสั่งเช่นบริการจะทำให้ผู้ให้บริการที่ไม่รู้จัก: $ scopeProvider <- $ scope error กรณีนี้อาจเกิดขึ้นหากมีการลงทะเบียนคอนโทรลเลอร์เป็นบริการโดยไม่ถูกต้องเช่น:

angular.module('myModule', [])
       .service('MyController', ['$scope', function($scope) {
        // This controller throws an unknown provider error because
        // a scope object cannot be injected into a service.
}]);