Angular“angular.js：14110錯誤：[ng：areq]參數'fn'不是函數，未定義”控制器實例化異常

Question

我正在使用Angular和TypeScript建立一個新的MVC 5項目，我遇到了實例化控制器和服務的問題。 當我在我的HTML中包含ng-controller時出現以下錯誤：

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

問題可能是打字稿將您的UserService轉換為類似的東西

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

在JavaScript中，可以使用在定義之前使用var定義的變量，但該值將是undefined ：

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

因此，進口事項的順序：你必須確保在調用之前執行定義你的類的代碼.service(...)或.controller(...)它必須調用上述字面上定位）。

如果你想使用類並將它們分割成文件，我建議使用typescripts import機制和模塊加載器系統，如amd 。 這可確保在使用時定義類。