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 。 这可确保在使用时定义类。