2016-05-24 4 views
0

これまでSPAアプリケーションは完全に動作しています。 AngularJS(+その他のライブラリ)を使用してJavaScriptで開発されました。AngularJSを使用してJavaScriptを縮小する - 依存性注入エラー

今、スクリプトを小さくしたいと思います.YuicompressorとGoogleのコンパイラの両方をテストしています。

スクリプトの縮小版をデプロイしてテストすると、エラーが発生します。

により縮小する前に、JavaScriptファイルは次のとおりです。

var MyApp_Sim_Web = angular.module('MyApp_Sim_Web', ['ngRoute' , 'ngSanitize']) ; 


//----------------------------------------------------------------------------------------------------------------------------------------------------------------- 
//----------------------------------------------------------------------- $routeProvider ------------------------------------------------------------------------ 
//----------------------------------------------------------------------------------------------------------------------------------------------------------------- 


    MyApp_Sim_Web.config(function($routeProvider) { 

     $routeProvider 

      .when ('/Login', { 
       templateUrl: 'Pages/Login.html' , 
       controller: 'LoginController' 
      }) 

      .when ('/', { 
       templateUrl: 'Pages/Login.html' , 
       controller: 'LoginController' 
      }) 
      .when ('/User_Main', { 
       templateUrl: 'Pages/User_Main.html' , 
       controller: 'UserController' 
      }) 
      .otherwise({ redirectTo: '/' }); 

    }); 

//----------------------------------------------------------------------------------------------------------------------------------------------------------------- 
//----------------------------------------------------------------------- $IndexController ---------------------------------------------------------------------- 
//----------------------------------------------------------------------------------------------------------------------------------------------------------------- 

    MyApp_Sim_Web.filter('Make_Timestamp_Readable', function() { 
     return function(input) { 
      var date = new String(input), 
       year = date[ 0] + date[ 1] + 
          date[ 2] + date[ 3] , 
       month = date[ 4] + date[ 5] , 
       day  = date[ 6] + date[ 7] , 
       hour = date[ 8] + date[ 9] , 
       minute = date[10] + date[11] , 
       seconds = date[12] + date[13]  ; 

      var reformattedDate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + seconds; 

      var newDate = new Date(reformattedDate); 

      return newDate; 
     }; 
    }); 

//----------------------------------------------------------------------------------------------------------------------------------------------------------------- 
//----------------------------------------------------------------------- $IndexController ---------------------------------------------------------------------- 
//----------------------------------------------------------------------------------------------------------------------------------------------------------------- 

MyApp_Sim_Web.controller('IndexController' , ['$rootScope' , '$scope' , '$log' , '$location' , '$sce' , 'DB_Services' , function($rootScope , $scope , $log , $location , $sce , DB_Services) { 


     // Following declaration is aimed to enable access to DB from any controller. 

     $rootScope.Handle_DB_Request = function(p_Query , p_Callback) { 
      DB_Services(p_Query).then(function(d) { 

       p_Callback(d) ; 
      }); 
     };    

} ]) ; 

縮小さバージョン使用yuicompressorです:Googleのコンパイラを使用して

var MyApp_Sim_Web=angular.module("MyApp_Sim_Web",["ngRoute","ngSanitize"]);MyApp_Sim_Web.config(function(a){a.when("/Login",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/User_Main",{templateUrl:"Pages/User_Main.html",controller:"UserController"}).otherwise({redirectTo:"/"})});MyApp_Sim_Web.filter("Make_Timestamp_Readable",function(){return function(g){var a=new String(g),e=a[0]+a[1]+a[2]+a[3],d=a[4]+a[5],f=a[6]+a[7],c=a[8]+a[9],b=a[10]+a[11],i=a[12]+a[13];var j=e+"-"+d+"-"+f+" "+c+":"+b+":"+i;var h=new Date(j);return h}});MyApp_Sim_Web.controller("IndexController",["$rootScope","$scope","$log","$location","$sce","DB_Services",function(b,d,e,f,c,a){b.Handle_DB_Request=function(h,g){a(h).then(function(i){g(i)})}}]); 

と同じされます。エラー

var MyApp_Sim_Web=angular.module("MyApp_Sim_Web",["ngRoute","ngSanitize"]);MyApp_Sim_Web.config(function(a){a.when("/Login",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/",{templateUrl:"Pages/Login.html",controller:"LoginController"}).when("/User_Main",{templateUrl:"Pages/User_Main.html",controller:"UserController"}).otherwise({redirectTo:"/"})}); 
MyApp_Sim_Web.filter("Make_Timestamp_Readable",function(){return function(a){a=new String(a);return new Date(a[0]+a[1]+a[2]+a[3]+"-"+(a[4]+a[5])+"-"+(a[6]+a[7])+" "+(a[8]+a[9])+":"+(a[10]+a[11])+":"+(a[12]+a[13]))}});MyApp_Sim_Web.controller("IndexController",["$rootScope","$scope","$log","$location","$sce","DB_Services",function(a,d,e,f,g,b){a.Handle_DB_Request=function(a,c){b(a).then(function(a){c(a)})}}]); 

私は(Chomeのコンソール)を得る:

[$injector:modulerr] http://errors.angularjs.org/1.4.0-rc.1/$injector/modulerr?p0=PayPlus_Sim_We…2F%2F127.0.0.1%3A59561%2FPublic_Libs%2FAngular%2Fangular.min.js%3A39%3A416) 

説明したように、アプリケーションが完全に機能するので、アプリケーションが完全に動作する(コンソールでは何のエラーもありません)ので、非常に奇妙です。

誰が何が起こっているか考えている人はいますか?

ありがとうございます。

+0

'MyApp_Sim_Web.config(関数($ routeProvider){' ==> 'MyApp_Sim_Web.configを( ''$ routeProvider'、function($ routeProvider){' – Tushar

+0

答えは解決策を提供しますが、その理由を説明しませんAngular's depシステムは関数から '.toString()'を解析して名前付き引数をハックアップし、関数定義内の物理的な引数名を使ってdepを検索します。関数の引数をrenamesは、存在しない依存関係を探すためにangleが意味することを意味します。配列の表記法を使用すると、それがエイリアスになるので、角度は引数名ではなく配列の値でデプスを探します。だからどこに何かを注入する場合は、配列表記を使うべきです。 – ste2425

+0

説明のために非常に@ ste2425ありがとうございます。残念ながら、コメントを投票することはできません。 – FDavidov

答えて

2

あなたは、コントローラへの依存性注入されたとまったく同じように実行します:あなたの設定で

MyApp_Sim_Web.controller('IndexController' , ['$rootScope' , '$scope' , '$log' , '$location' , '$sce' , 'DB_Services' , function($rootScope , $scope , $log , $location , $sce , DB_Services) 

MyApp_Sim_Web.config(['$routeProvider',function($routeProvider) { 

} 
+0

あなたの迅速で正しい回答のための@geckobありがとうございます。それは問題を解決しました(何とか私はこの依存関係を正しく注入していないという事実を逃しました)。 – FDavidov

+0

@FDavidov:問題ありません。私は両方の方法がうまくいくと思います。しかし、あなたが小型化する必要がある場合は、AngularJS DIの仕組みのせいでこのようにする必要があります。それは暗黙のうちに関数のパラメータ名から注入されます。関数の名前は、名前が変更されてから縮小されると混乱します。 – geckob

1

あなたはと

MyApp_Sim_Web.config(function($routeProvider) { 

を交換する必要があります:私はしばらく前に同じエラーが発生しました

MyApp_Sim_Web.config(['$routeProvider',function($routeProvider) { 

、これは組み込みの問題であり、詳細は https://stackoverflow.com/a/37197114/4937709

1

のためにこれを読んでAngularで「解」については、hereを参照してください。

関連する問題