What to do when angular controller is initialized over and over?

It is probably a rare case, but it already happened to me at least twice.

The thing is this:

We have rather big angular application, it is more like several semi-independent applications (or modules). Everything works fine except one dialog with specific url, which causes given angular controller to initialize over and over. The browser UI is frozen, javascript engine is working like crazy, until finally page crashes. It turns out that the cause of this problem is rather silly. It is the url specified in base tag.

My buggy code looked like this

Index.html

<base href="/some/path/bleble/" />

Angular

//its typescript
($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider, $httpProvider: any) => {
 $locationProvider.html5Mode(true);

 $routeProvider.when("/", { templateUrl: "template.html", controller: "SomeCtrl", caseInsensitiveMatch: true });
 $routeProvider.when("/profile", { templateUrl: "template.html", controller: "SomeCtrl", caseInsensitiveMatch: true });
 $routeProvider.otherwise({ redirectTo: "/profile" });
}

Corrected version

<base href="/some/path/bleble" />

See the difference? No? .. i did not see it either. The difference is the slash “/” in the end of the base url. When the slash is present it then angular router can not find a matching url, redirects to default, fails again. So it redirects again, fails to find a match, redirects, fails …, …, over and over.

One stupid slash 🙂

Happy debugging.