feat(router): Replaced @ngrx/router with @angular/router

Author: brandonroberts

README.md

@@ -2,14 +2,13 @@
 
 Example application utilizing @ngrx libraries, showcasing common patterns and best practices. You can find the live app [here](http://ngrx.github.io/example-app/).
 
-This app is a book collection manager. Using the Google Books API, the user can search for books and add them to their collection. This application utilizes [@ngrx/db](https://github.com/ngrx/db) to persist the collection across sessions; [@ngrx/store](https://github.com/ngrx/store) to manage the state of the app and to cache requests made to the Google Books API; [@ngrx/router](https://github.com/ngrx/router) to manage navigation between routes; and [@ngrx/effects](https://github.com/ngrx/effects) to isolate side effects.
+This app is a book collection manager. Using the Google Books API, the user can search for books and add them to their collection. This application utilizes [@ngrx/db](https://github.com/ngrx/db) to persist the collection across sessions; [@ngrx/store](https://github.com/ngrx/store) to manage the state of the app and to cache requests made to the Google Books API; [@angular/router](https://github.com/angular/angular) to manage navigation between routes; and [@ngrx/effects](https://github.com/ngrx/effects) to isolate side effects.
 
 ### Included
  - [ngrx/store](https://github.com/ngrx/store) - RxJS powered state management for Angular2 apps, inspired by Redux
  - [ngrx/effects](https://github.com/ngrx/effects) - Side effect model for @ngrx/store
- - [ngrx/router](https://github.com/ngrx/router) - Reactive Routing for Angular 2
+ - [angular/router](https://github.com/angular/angular) - Angular2 Component Router
  - [ngrx/db](https://github.com/ngrx/db) - RxJS powered IndexedDB for Angular2 apps
- - [ngrx/router-store](https://github.com/ngrx/router-store) - Bindings to connect ngrx/router to ngrx/store
  - [ngrx/store-devtools](https://github.com/ngrx/store-devtools) - Instrumentation for @ngrx/store enabling time-travel debugging
  - [ngrx/store-log-monitor](https://github.com/ngrx/store-log-monitor) - A port of redux-devtools-log-monitor for Angular 2 and @ngrx/store
 

package.json

@@ -34,6 +34,7 @@
     "@angular/http": "2.0.0-rc.4",
     "@angular/platform-browser": "2.0.0-rc.4",
     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/router": "3.0.0-beta.2",
     "@angular2-material/button": "2.0.0-alpha.6",
     "@angular2-material/card": "2.0.0-alpha.6",
     "@angular2-material/core": "2.0.0-alpha.6",
@@ -45,8 +46,6 @@
     "@ngrx/core": "^1.0.0",
     "@ngrx/db": "^1.1.0",
     "@ngrx/effects": "^1.0.1",
-    "@ngrx/router": "^1.0.0-beta.1",
-    "@ngrx/router-store": "0.0.1",
     "@ngrx/store": "^2.0.0",
     "@ngrx/store-devtools": "^2.0.0-beta.1",
     "@ngrx/store-log-monitor": "^2.0.0-beta.1",

src/app.ts

@@ -41,12 +41,12 @@ import { StoreLogMonitorComponent } from '@ngrx/store-log-monitor';
     <md-sidenav-layout fullscreen>
       <md-sidenav #sidenav>
         <md-nav-list>
-          <a md-list-item linkTo="/" (click)="sidenav.close()">
+          <a md-list-item routerLink="/" (click)="sidenav.close()">
             <md-icon md-list-icon>book</md-icon>
             <span md-line>My Collection</span>
             <span md-line class="secondary">View your book collection!</span>
           </a>
-          <a md-list-item linkTo="/book/find" (click)="sidenav.close()">
+          <a md-list-item routerLink="/book/find" (click)="sidenav.close()">
             <md-icon md-list-icon>search</md-icon>
             <span md-line>Browse Books</span>
             <span md-line class="secondary">Find your next book!</span>
@@ -60,7 +60,7 @@ import { StoreLogMonitorComponent } from '@ngrx/store-log-monitor';
         <span>Books Sample App</span>
       </md-toolbar>
 
-      <route-view></route-view>
+      <router-outlet></router-outlet>
 
     </md-sidenav-layout>
     <ngrx-store-log-monitor toggleCommand="ctrl-t"></ngrx-store-log-monitor>

src/components/book-preview.ts

@@ -17,7 +17,7 @@ export type BookInput = Book;
     MD_LIST_DIRECTIVES
   ],
   template: `
-    <a [linkTo]=" '/book/' + id">
+    <a [routerLink]="['/book', id]">
       <md-card>
         <md-card-title-group>
           <md-card-title>{{ title }}</md-card-title>

src/guards/book-exists.ts

@@ -3,7 +3,7 @@ import 'rxjs/add/operator/first';
 import 'rxjs/add/observable/concat';
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Guard, TraversalCandidate } from '@ngrx/router';
+import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 
 import { GoogleBooksService } from '../services/google-books';
@@ -13,18 +13,16 @@ import { BookActions } from '../actions/book';
 
 /**
  * Guards are hooks into the route resolution process, providing an opportunity
- * to inform the router's traversal process whether the route should continue
- * to be considered a candidate route. Guards must return an observable of
- * true or false.
- *
- * More on guards: https://github.com/ngrx/router/blob/master/docs/overview/guards.md
+ * to inform the router's navigation process whether the route should continue
+ * to activate this route. Guards must return an observable of true or false.
  */
 @Injectable()
-export class BookExistsGuard implements Guard {
+export class BookExistsGuard implements CanActivate {
   constructor(
     private store: Store<AppState>,
     private googleBooks: GoogleBooksService,
-    private bookActions: BookActions
+    private bookActions: BookActions,
+    private router: Router
   ) { }
 
   /**
@@ -55,7 +53,10 @@ export class BookExistsGuard implements Guard {
       .map(book => this.bookActions.loadBook(book))
       .do(action => this.store.dispatch(action))
       .map(book => !!book)
-      .catch(() => Observable.of(false));
+      .catch(() => {
+        this.router.navigate(['/404']);
+        return Observable.of(false);
+      });
   }
 
   /**
@@ -87,8 +88,8 @@ export class BookExistsGuard implements Guard {
    * on to the next candidate route. In this case, it will move on
    * to the 404 page.
    */
-  protectRoute({ routeParams: { id } }: TraversalCandidate) {
+  canActivate(route: ActivatedRouteSnapshot) {
     return this.waitForCollectionToLoad()
-      .switchMapTo(this.hasBook(id));
+      .switchMapTo(this.hasBook(route.params['id']));
   }
 }

src/guards/index.ts

@@ -1 +1,7 @@
-export { BookExistsGuard } from './book-exists';
+import { BookExistsGuard } from './book-exists';
+
+export { BookExistsGuard };
+
+export default [
+  BookExistsGuard
+];

src/main.browser.ts

@@ -1,10 +1,10 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HashLocationStrategy } from '@angular/common';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { disableDeprecatedForms, provideForms } from '@angular/forms';
-import { provideRouter } from '@ngrx/router';
+import { provideRouter, ROUTER_DIRECTIVES } from '@angular/router';
+import { PLATFORM_DIRECTIVES } from '@angular/core';
 import { provideStore } from '@ngrx/store';
 import { provideDB } from '@ngrx/db';
-import { connectRouterToStore } from '@ngrx/router-store';
 import { runEffects } from '@ngrx/effects';
 import { instrumentStore } from '@ngrx/store-devtools';
 import { useLogMonitor } from '@ngrx/store-log-monitor';
@@ -16,6 +16,7 @@ import reducer from './reducers';
 import effects from './effects';
 import services from './services';
 import actions from './actions';
+import guards from './guards';
 
 
 bootstrap(App, [
@@ -42,20 +43,21 @@ bootstrap(App, [
   runEffects(effects),
 
   /**
-   * provideRouter sets up all of the providers for @ngrx/router. It accepts
+   * provideRouter sets up all of the providers for @angular/router. It accepts
    * an array of routes and a location strategy. By default, it will use
    * `PathLocationStrategy`.
-   *
-   * Source: https://github.com/ngrx/router/blob/master/lib/index.ts#L44-L51
    */
-  provideRouter(routes, HashLocationStrategy),
+  provideRouter(routes),
+
+  /**
+   * Make router directives available to all components
+   */
+  { provide: PLATFORM_DIRECTIVES, useValue: [ROUTER_DIRECTIVES], multi: true },
 
   /**
-   * connectRouterToStore configures additional providers that synchronize
-   * router state with @ngrx/store. This lets you debug router state using
-   * ngrx/store and to change the location by dispatching actions.
+   * Override the default location strategy with `HashLocationStrategy`
    */
-  connectRouterToStore(),
+  { provide: LocationStrategy, useClass: HashLocationStrategy },
 
   /**
    * provideDB sets up @ngrx/db with the provided schema and makes the Database
@@ -79,6 +81,7 @@ bootstrap(App, [
    */
   services,
   actions,
+  guards,
 
   disableDeprecatedForms(),
   provideForms()

src/pages/book-view.ts

@@ -1,7 +1,8 @@
 import '@ngrx/core/add/operator/select';
+import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
 import { Component } from '@angular/core';
-import { RouteParams } from '@ngrx/router';
+import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
@@ -35,13 +36,15 @@ export class BookViewPage {
   constructor(
     private store: Store<AppState>,
     private bookActions: BookActions,
-    private routeParams$: RouteParams
+    private route: ActivatedRoute
   ) {
-    this.book$ = routeParams$
+    this.book$ = route
+      .params
       .select<string>('id')
       .switchMap(id => store.let(getBook(id)));
 
-    this.isBookInCollection$ = routeParams$
+    this.isBookInCollection$ = route
+      .params
       .select<string>('id')
       .switchMap(id => store.let(isBookInCollection(id)));
   }

src/pages/not-found.ts

@@ -13,7 +13,7 @@ import { MdButton } from '@angular2-material/button';
         <p>Hey! It looks like this page doesn't exist yet.</p>
       </md-card-content>
       <md-card-actions>
-        <button md-raised-button color="primary" linkTo="/">Take Me Home</button>
+        <button md-raised-button color="primary" routerLink="/">Take Me Home</button>
       </md-card-actions>
     </md-card>
   `,

src/reducers/index.ts

@@ -8,7 +8,7 @@ import { Observable } from 'rxjs/Observable';
  * it any number of functions and it returns a function. This new function
  * takes a value and chains it through every composed function, returning
  * the output.
- * 
+ *
  * More: https://drboolean.gitbooks.io/mostly-adequate-guide/content/ch5.html
  */
 import { compose } from '@ngrx/core/compose';
@@ -28,17 +28,11 @@ import { storeLogger } from 'ngrx-store-logger';
  * functions and creates a new reducer that stores the gathers the values
  * of each reducer and stores them using the reducer's key. Think of it
  * almost like a database, where every reducer is a table in the db.
- * 
+ *
  * More: https://egghead.io/lessons/javascript-redux-implementing-combinereducers-from-scratch
  */
 import { combineReducers } from '@ngrx/store';
 
-/**
- * @ngrx/router-store keeps the router in sync with @ngrx/store. To connect the
- * two, we need to use the routerReducer.
- */
-import { routerReducer, RouterState } from '@ngrx/router-store';
-
 
 /**
  * Every reducer module's default export is the reducer function itself. In
@@ -56,7 +50,6 @@ import collectionReducer, * as fromCollection from './collection';
  * our top level state interface is just a map of keys to inner state types.
  */
 export interface AppState {
-  router: RouterState;
   search: fromSearch.SearchState;
   books: fromBooks.BooksState;
   collection: fromCollection.CollectionState;
@@ -71,7 +64,6 @@ export interface AppState {
  * the result from right to left.
  */
 export default compose(storeLogger(), combineReducers)({
-  router: routerReducer,
   search: searchReducer,
   books: booksReducer,
   collection: collectionReducer