John Vorwald

John Vorwald

Angular 1.5+’s ported Angular 2 Router – Some Observations.

April 13, 2016

I wish this were a post with things that someone might find useful. Instead it is more a spilling of my exploration with Angular 2 router that they’ve ported to newer versions of Angular 1 (1.5+ in my case).

In a word: Awesome.

In another word: Frustrating.


Well, it does what it does very well. That is to say it routes and deals with sub routing very handily. Unfortunately it seems to not deal with updating the url with query params in a manner that you (the user) can see easily that will then persist. There are options though: using Instructions, using location.go()…

But they really one seem to work well when navigating to a new route or refreshing the route you’re already on… This is bad in my particular case because I want to keep some none-essential information for the use and for our apis in the url…

There also seems to be some odd separation between $location and the new router’s Location. I can get location.go() to update the url params as a change happens (while $ is also being used in code I haven’t touched yet) then use the router to navigate to a new view. The changes from location.go() don’t carry over, but ones I can’t see but did set with $ persist…

I also noticed I got the best results when I put my query string changes in the router lifecycle hooks (though $routerOnActivate would make our api calls happen x2 to x4 times….).

I have the feeling if I was just using Angular 2 a lot of these issues would solve themselves. IE: I wouldn’t be mixing things from 1 that I use frequently that won’t exist the same way in 2.

The exploration also gives me a good idea the hurdles the team might have to deal with given how we rely on the query string.

Previous: Next: