AngularJS app using TypeScript cannot call method of undefined

Question

I am new to AngularJS and web development in general so this may be a stupid question but I cannot figure it out.

I have my main app

/// <reference path="../../references.ts" />


angular.module("mainApp", [])
    .config(($routeProvider: ng.IRouteProvider) => {
        $routeProvider
            .when("/", {
                templateUrl: "/app/module/mainApp/partials/main.html",
                controller: AppController,
                //datacontext
                controllerAs: "dc"
            })
            .when("/login", {
                templateUrl: "/app/module/mainApp/partials/login.html",
                controller: LoginController,
                controllerAs: "dc",

            })
    })

    .run(($rootScope: ng.IRootScopeService, $location: ng.ILocationService, AuthService) => {
        $rootScope.$on("$routeChangeStart", (event, next, current) => {
            if (!AuthService.IsLoggedIn()) {
                if (next.templateUrl == "app/module/mainApp/partials/login") {
                    return;
                } else {
                    $location.path("/login");
                }
            }
        });
    })

My auth service looks like this. Alert in the constructor is never called

/// <reference path="../../../references.ts" />

class AuthService {
    constructor(public ServiceManager: IServiceManager, public TokenHandler) {
        alert("I am a constructor");
    }

    Login(loginRequest: Models.LoginRequest, successCallback) {
        var params = {
            username: loginRequest.username,
            password: loginRequest.password
        };

        var service = this.ServiceManager.CallGetWithoutToken("http://url...", params);
        service.success((data, status, headers, config) => {
            this.TokenHandler.SetToken(data.replace(reg, ''));
        });
    };

    IsLoggedIn() {
        return this.TokenHandler.GetToken() != undefined;
    }
}

angular.module("mainApp").factory("AuthService", () => AuthService.prototype);

and finally my TokenHandler is this

class TokenHandler {
    token = undefined;

    constructor() {
    }

    ClearToken() {
        this.token = undefined;
    };

    SetToken(sessionToken: string) {
        this.token = sessionToken;
    };

    GetToken() {
        return this.token;
    };
}

angular.module("mainApp").factory("TokenHandler", () => TokenHandler.prototype);

All my .ts files are in references.ts and I have added .js files to index.html.

When I run this I get an error cannot call method "GetToken()" of undefined

Should'nt AngularJS inject my TokenHandler in AuthService?

Ryan Cavanaugh · Accepted Answer · 2013-07-10 15:21:36Z

1

These lines seem almost certainly wrong; what were you intending to do passing the .prototype here?

angular.module("mainApp").factory("TokenHandler", () => TokenHandler.prototype);

angular.module("mainApp").factory("AuthService", () => AuthService.prototype);

I think you want:

angular.module("mainApp").factory("TokenHandler", () => new TokenHandler());

angular.module("mainApp").factory("AuthService", () => new AuthService());

answered Jul 10, 2013 at 15:21

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS app using TypeScript cannot call method of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related