かなりシンプルな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
に設定すると再現できるので、明らかにミニ化プロセスと関係があるようだ。
リンクをたどると、$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
}])
これで問題は解決するはずです。
もう一度言っておきますが、私が言ったことはすべてエラーメッセージのリンク先にあります。
私も同じ問題に遭遇しましたが、私のコントローラ定義は上記とは少し異なっていました。 このように定義されたコントローラに対して
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
};
}
};
});
最小化すると、コントローラー関数に渡された「$ scope」は、1文字の変数名に置き換えられます。 . これは依存関係の角質無知になります。 . これを回避するには、依存関係名と配列としての関数を渡します。
angular.module("appName").directive('directiveName', function () {
return {
restrict: 'AE',
templateUrl: 'calender.html'
controller: ['$scope', function ($scope) {
$scope.selectThisOption = function () {
// some code
};
}]
};
});
もし、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"));
そして、アンギュラアプリは修正されずにバンドルに表示されます。
同じ問題がありましたが、問題は別の問題でした。サービスを作成して、パラメーターとして$ scopeを渡そうとしていました。 これは、そのリンクのドキュメントに次のように記載されているため、このエラーを取得するもう1つの方法です。
コントローラーやディレクティブではないもの(サービスなど)にスコープオブジェクトを注入しようとすると、不明なプロバイダーもスローされます:$ scopeProvider<- $ scopeエラー。 これは、コントローラーを誤ってサービスとして登録した場合に発生する可能性があります。:
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.
}]);