Angular2 router VS ui-router-ng2 VS ngrx router

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 1:

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.