アンキャッチエラー：デプロイ後のangularで[$injector:unpr]"が発生しました。

かなりシンプルなAngularアプリケーションを持っていて、開発マシンでは問題なく動作しているのですが、デプロイするとこのエラーメッセージ（ブラウザコンソール）が表示されて失敗します：

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を実行しており、git経由でAzureにプッシュしています。

ググっても何も出てきません。

何か提案はありますか？

編集

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 に設定すると再現できるので、明らかにミニ化プロセスと関係があるようだ。

Ken Smith
編集された質問 19日 3月 2015 в 7:02
プログラミング
angularjs
30日 10月 2013 в 1:00
1ビュー
ソリューション

リンクをたどると、$injectorが依存関係を解決できないためにエラーが発生することがわかります。これはangularでよくある問題で、javascriptがminifyされたりuglifiedされたりしたときに発生します。

この問題は、たとえばコントローラがある場合に発生します；

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

minificationは$scopeと$qをランダム変数に変えてしまうので、angularに何を注入すべきかを伝えられません。解決策は、依存関係をこのように宣言することです：

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

これで問題は解決するはずです。

もう一度言っておきますが、私が言ったことはすべてエラーメッセージのリンク先にあります。

Kriem
編集した答え 3日 6月 2014 в 1:25
解説 (11)

私も同じ問題に遭遇しましたが、私のコントローラ定義は上記とは少し異なっていました。 このように定義されたコントローラに対して

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

宣言の後に、コントローラのインスタンス化時に注入するオブジェクトを示す行を追加するだけです：

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

これでミニフィケーションセーフになります。

解説 (0)

この問題は、コントローラーまたはディレクティブが依存関係と関数の配列として指定されていない場合に発生します。 例えば。

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

最小化すると、コントローラー関数に渡された「$ scope」は、1文字の変数名に置き換えられます。 . これは依存関係の角質無知になります。 . これを回避するには、依存関係名と配列としての関数を渡します。

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

もし、angular appresourcesdirectivesとその他のファイルを分けているなら、このようにangular appバンドルのminificationを無効にすればいい（バンドル設定ファイルでScriptBundle()の代わりにnew Bundle()を使う）：

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"));

そして、アンギュラアプリは修正されずにバンドルに表示されます。

解説 (3)

$ http、$ scopeサービスをコントローラー機能に追加します。これらのエラーが欠落している場合は、エラーが発生します。

解説 (0)

angular app \ resources \ directivesなどのファイルを区切っている場合は、このようにangularアプリバンドルの最小化を無効にすることができます(バンドル構成ファイルのScriptBundle()の代わりに新しいBundle()を使用します)。

解説 (0)

同じ問題がありましたが、問題は別の問題でした。サービスを作成して、パラメーターとして$ scopeを渡そうとしていました。 これは、そのリンクのドキュメントに次のように記載されているため、このエラーを取得するもう1つの方法です。

コントローラーやディレクティブではないもの(サービスなど)にスコープオブジェクトを注入しようとすると、不明なプロバイダーもスローされます:$ scopeProvider

解説 (0)