Angular "angle.js：14110 Error：[ng：areq]引数 'fn'は関数ではなく、未定義です"コントローラインスタンス化の例外

Question

AngularとTypeScriptを使用して新しいMVC 5プロジェクトを設定しています。コントローラとサービスをインスタンス化する際に問題が発生しています。私はHTMLでNG-コントローラを含むとき、私は次のエラーを取得する：ここで

angular.js:14110 Error: [ng:areq] Argument 'fn' is not a function, got undefined 

は私の設定です：

app.ts：

module mqApp { 
    'use strict'; 

    if (typeof (angular) != "undefined") { 
     var modules; 

     modules = []; 

     angular.module("mqApp", modules) 
      .controller("MasterController", MasterController) 
      .service("UserService", UserService); 
    } 
} 

userService.ts：

module mqApp { 

    'use strict'; 

    export class UserService { 
     public static $inject = [ 
      '$scope', 
      '$http', 
      '$window' 
     ]; 

     private scope: angular.IScope; 
     private httpSvc: angular.IHttpService; 
     private window: angular.IWindowService; 

     constructor($scope: angular.IScope, $http: angular.IHttpService, $window) { 
      this.scope = $scope; 
      this.httpSvc = $http; 
      this.window = $window; 
      alert(2); 
     } 

     logOff() { 
      this.httpSvc.get('/Account/LogOff'); 
      this.window.location.href = '/'; 
     } 

    } 
} 

masterController.ts：

module mqApp { 
    'use strict'; 

    export class MasterController { 
     public static $inject = [ 
      '$scope', 
      'UserService' 
     ]; 

     private userService: UserService; 
     private scope: angular.IScope; 

     contructor($scope: angular.IScope, userService: UserService) { 
      alert(1); 
      this.userService = userService; 
      this.scope = $scope; 

     } 
    } 
} 

Answer 1

コンストラクタの綴りがMasterController.tsで間違っています。

Answer 2

問題は1つがその定義の前にvarで定義された変数を使用することができ、そのtypescriptですが、あなたのUserService

JavaScriptで

var UserService = function($scope, /* ... */) { 
    this.$scope = $scope; 
    // ... 
} 

に似たものに変換さかもしれませんが、値がundefinedになります。

console.log(UserService); // => undefined 
class UserService {} 
console.log(UserService); // => function() { .... } 

したがって、インポートの順序は重要です：クラスを定義するコードが実行されることを確認する必要がありますの呼び出しの前に.service(...)または.controller(...)（これは文字通り通話の上に配置する必要があります）。

クラスを使用してファイルに分割したい場合は、amdのようなtypescripts importメカニズムとモジュールローダーシステムを使用することをお勧めします。これにより、使用時にクラスが確実に定義されます。