Angular2 router VS ui-router-ng2 VS ngrx router

Question

What are the benefits and disadvantages of using ui-router-ng2 instead of the new Angular2 router? In the past i used ui-router with Angular 1.x instead of using ngRoute, because i need better support for nested states/routes.

So now, what about Angular2? I would like to hear by you so i can evaluate both opportunities.

Besides, searching and searching on Google i found ngrx/router, that i didn't know. Can you tell me what are the differences between the builtin router of Angular2, the new ui-router for Angular2 and ngrx router?

Solution

General information

NGRX Router docs

ngrx router is Deprecated! There is migration strategy from ngrx router to the standard Angular2 Router.

Angular2 Router docs

1. Default solution from Angular team
2. Was inspired by UI-router from AngularJS
3. Built for components

Angular2 Router has almost all UI-router features.

NG2 UI-router docs

Well known UI-router from AngularJS updated for the Angular2. From the known advantages - makes smoother update from AngularJS UI-router to ng2 UI-router.

Comparing

Let's compare syntax of UI-router both versions with Angular2 Router.

AngularJS UI-router :

app.config(function($stateProvider){
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    })
});

Angular2 UI-router :

export let state1: Ng2StateDeclaration = {
    name: 'home',
    component: HomeComponent,
    url: '/home'
}

@NgModule({
 imports: [
   SharedModule,
   UIRouterModule.forChild({ states: [home] })
 ],
declarations: [HomeComponent]
})
export class MyModule {}

Angular2 Router :

(Update: property - name was removed after V3-alpha7. Because it didn't work out with lazy loading of routes.)

import {
    RouteConfig,
    Route
} from 'angular2/router';
import {HomeComponent} from './components/home';

@Component({})
@RouteConfig([
    new Route({ 
        path: '/home', 
        component: HomeComponent, 
        name: 'Home' // Deprecated property, works until v3-alpha7
    })
])
export class App {...}

As we can see, in general, Angular2 Router is pretty much the same. As addition need to say that it support most of the common features like static/dynamic data sharing through the routes, nested views etc.

• Same location strategies (Path and Hash)
• Similar route definitions
• Similar services:
  • $state.go and Router.navigate
  • $stateParams and RouteParams
  • $state.current.data and RouteData
• Similar directives
  • ui-view and router-outlet
  • ui-sref and routerLink

Conclusion

Angular2 Router had taken best of UI-router experience and implemented it. If you need easy migrate your code base with AngularJS UI-router to Angular2 fast and smoothly, you can try Ng2 UI-router, otherwise, I think Angular2 Router will fit best. Even if you decided to use NG2 UI-router, check all pros and cons, at current point I feel like the community is going to choose a standard solution from the Angular team which means better support.

Comments

[Paul Swetz]

ngrx/router is DEPRECATED for angular 2 -> github.com/ngrx/router

[Jasman]

Having a couple of Angular 1.x apps, including a 1.5.x app with components, there may be a compelling argument to stick with ui-router, as it's finalizing component routing support for NG1 with components. The Angular team appear to be almost at the point of scrapping plans for a backport of the NG2 router for NG1 apps. Also, the UI-Router docs just got a facelift and seem greatly improved over the last time I looked at them.

[demisx]

We've tried both and the state based Angular 2 UI-Router is our first choice by far, just like it was when we were building Angular 1 apps. Support is excellent. Highly recommend it over Angular 2 stock router.

[RobYed]

@demisx can you clarify the reasons for choosing UI-Router over Angular 2 Router? In my oppinion the main feature differences are named states, default and non-url parameter values in UI Router (which could be sufficient arguments). Did you consider any other differences?

[Mikki Kobvel]

@demisx, my main message here is that new angular router was created with ideas of ui-router, so the difference is not big. But you are getting angular development team if you are choosing angular default router with almost same features as in ui-router.

[demisx]

I wouldn't say the Angular 2 router is almost the same as UI Router. Not in my personal and my team's opinion. Sure, Angular 2 tried to copy some features from it, but UI Router's state-based UI is one of the biggest advantages over a URL path-based Angular 2 router, IMHO. Also, folks coming from the AngularJS world would have a much better experience porting their existing or developing new apps in Angular 2/4, since the UI-router is pretty much de facto router in Angular 1 world.

[DeborahK]

NOTE: Even through this was answered after the final release of Angular v2 in September, the shown router code is for the deprecated router.

[Benjamin]

If you need named router-outlets AND a normal looking URL, look into UI Router. Currently named outlets in the default router have really poor URLs. (eg foo.com/my-route(outletA:componentA//outletB:componentB))

[ACP]

One feature that seems to be supported by ui-router but not by angular's default router is typed parameters; default router parameters are always strings AFAIK.