1. ホーム
  2. angularjs

[解決済み] "Uncaught Error: デプロイ後のangularで「[$injector:unpr]」が発生する

2023-01-27 17:54:05

質問

かなりシンプルな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 にプッシュしています。

ググっても面白いことは出てきません。

何かいい方法はないでしょうか?

EDITです。

TypeScriptを使っていて、依存関係を定義するのに $inject 変数で定義しています。

export class DashboardCtrl {

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

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

これは、minification中に発生し、このエラーを引き起こす可能性のあるローカル変数のリネームの問題を回避するはず(または意図されている)だと思います。

とはいえ、明らかにminificationプロセスと関係があるようで、私が BundleTable.EnableOptimizations = true を設定すると、再現できます。

どのように解決するのですか?

リンクをたどると、$injectorが依存関係を解決できないためにエラーが発生することがわかります。これは、javascriptがminify/uglify/制作のために何をしているかにかかわらず、angularで一般的な問題です。

問題は、例えばコントローラを持っている場合です。

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
}])

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

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