Angular and Typescript Memory leaks

Question

In a AngularJS 1.2.5 using TypeScript 0.9.1 app, we are seeing that when we change routes, the private methods on a controller class remain in the heap and leave detached DOM trees in chromes profiler.

If we navigate /#/view1 to /#/view2 and back to /3/view1, we end up with view1 controller class in the heap twice and view2 controller class in the heap as well.

Our workaround has been to not use private methods anymore.

The code generally looks like:

module views {
    app.controller("view1Ctrl", function($scope, $routeParams) {
        return new view1Ctrl($scope, $routeParams);
    });

    interface Scope extends  ng.IScope {
        TrackingTab: any;
    }

    class view1Ctrl {
        constructor(private $scope: Scope, $routeParams: any) {
            $scope.TrackingTab = $routeParams["tab"];

            $scope.$watch("showTab", (newValue: TrackingTab): void => {
                if (newValue === undefined) return;
            });
        }

        private changeTabToNew(): void {
            this.$scope.TrackingTab = "new"
        }
    }
}

we have to change to something along the lines of:

module views {
    app.controller("view1Ctrl", function($scope, $routeParams) {
        return new view1Ctrl($scope, $routeParams);
    });

    interface Scope extends  ng.IScope {
        TrackingTab: any;
    }

    class view1Ctrl {
        constructor(private $scope: Scope, $routeParams: any) {
            $scope.TrackingTab = $routeParams["tab"];

            $scope.$watch("showTab", (newValue: TrackingTab): void => {
                if (newValue === undefined) return;
            });

            $scope.changeTabToNew(): void {
                this.$scope.TrackingTab = "new"
            };
    }
}

Thanks in advance

Sorry, but I meant that I have to make the private method into the scope, I edited the question to give a little more information. Hope that helps. — Jdahern
– Jdahern, Commented Dec 19, 2013 at 19:24
You are saying that attaching the method to $scope is allowing the entire class to get garbage collected? but having it attached directly to the class is preventing the entire class from being garbage collected? — Fresheyeball
– Fresheyeball, Commented Dec 19, 2013 at 20:48
also, I attached it to the scope, but I can just have it as a var = function() => {blah} just as well — Jdahern
– Jdahern, Commented Dec 19, 2013 at 23:04

Carl · Accepted Answer · 2014-04-03 09:01:36Z

2

If you want to make functions private in javascript, please refer to: http://javascript.crockford.com/private.html

From the above code I think that the code:

private changeTabToNew(): void {
    this.$scope.TrackingTab = "new"
}

is simply creating a function changeTabToNew() on the global (or root) scope (the private keyword is not having the effect you are expecting btw). Since this is not part of the scope that exists in the controller, you are creating a reference to your 'TrackingTab' in global scope and thus the controller cannot be garbage collected.

answered Apr 3, 2014 at 9:01

Carl

1,26810 silver badges20 bronze badges

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

2 Comments

Jdahern Over a year ago

Interesting, That is something that we did suspect. When you say that the private keyword is not having the effect Im expecting, what do you mean by that? I thought that the private was more for type information than anything else. Thank you very much.

Carl Over a year ago

As regards the effect you are expecting, I think you would want to hide the method, prevent it from being accessed externally.

Collectives™ on Stack Overflow

Angular and Typescript Memory leaks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related