web-dev-qa-db-ja.com

grunt uglifyを使用したAngularjsの縮小によりjsエラーが発生する

Angularjsでは、依存性注入としてパラメーターを渡します。例えば、

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

それで縮小すると、

function checkInCtrl(a,b,c,d){
}

これで、a、b、c、dは、angular=によって$ scope、$ rootScope、$ location、$ httpとしてそれぞれ解釈されなくなり、コード全体が機能しなくなります。このAngularjsは、ソリューションは

checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http'];

上記の構文を使用して、さまざまな依存関係を挿入できます。これは、カスタムのangularサービスを依存関係として使用しないまではうまくいきました。たとえば、

私のようなものがあれば

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

それは与えられた解決策で機能しますが、私が何かのようなものを持っているなら

function checkInCtrl ($scope, $rootScope, $location, $http, customService){
…..
….
}

CustomServiceは次のようなものです

angular.module(customService, ['ngResource'])
                .factory('abc', function($resource) {
                                return $resource('/abc');
                })

縮小版は角度によって適切に解釈されません。

プロジェクト開発活動を開始する必要があったため、問題を調査するのに十分な時間を費やすことができず、それらを縮小せずにコントローラーの使用を開始しました。したがって、最初の質問は、angularにこのような問題があるのか​​、それともうまくいかなかったのか、そのような問題が存在する場合、それに対する解決策は何ですか？

javascriptangularjsdependency-injectiongruntjsuglifyjs
14
Navdeep

文字列注入ベースの構文を使用して、縮小バージョンが適切な依存関係を指すようにする必要があります。

function checkInCtrl ($scope, $rootScope, $location, $http){}

になる：

['$scope', '$rootScope', '$location', '$http', function checkInCtrl ($scope, $rootScope, $location, $http){}]
27
Cétia

参考までに、ngMinは 非推奨 です。代わりに ngAnnotate を使用する必要があります。これは grunt および gulp で美しく機能します。

9
jtheoof

ナビディープ、

Bixiから提案されたソリューションが機能します。ただし、より簡単な方法は、ngmin Gruntプラグインを使用することです。このプラグインを使用すると、依存関係の注入を以前の​​ように処理する必要がなくなり、Bixiのような特別な構文も必要なくなります。

それを使用するには、grunt-ngminと、醜い前にそれを呼び出すこと。

あなたのGruntfile.js：

ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

....

grunt.registerTask('build', [
  'ngmin',
  'uglify',
]);
8
suriyanto

Uglifyとminifyを動作させると、（私の場合と同様に）注入された変数が$ scopeなどから「a」に変更された場所が明らかになります。例：このコード：

controller: function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }

minifyとuglifyが次のようになると：

controller:function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}

また、「a」は$ scopeと同じではないため、エラーが発生します。

解決策は、注入された変数を明示的に宣言することです：

controller: ['$scope', function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }]

minifyとuglifyが次のようになると：

controller:["$scope",function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}]

これで 'a'が$ scopeにマップされました。

6
ssoward