feat(router): add support for CanActivate guard

modules/@angular/router/src/common_router_providers.ts

@@ -3,7 +3,7 @@ import { UrlSerializer, DefaultUrlSerializer } from './url_serializer';
 import { ActivatedRoute } from './router_state';
 import { Router } from './router';
 import { RouterConfig } from './config';
-import { ComponentResolver, ApplicationRef} from '@angular/core';
+import { ComponentResolver, ApplicationRef, Injector } from '@angular/core';
 import { LocationStrategy, PathLocationStrategy, Location } from '@angular/common';
 
 /**
@@ -32,17 +32,17 @@ export function provideRouter(config: RouterConfig):any[] {
 
     {
       provide: Router,
-      useFactory: (ref, resolver, urlSerializer, outletMap, location) => {
+      useFactory: (ref, resolver, urlSerializer, outletMap, location, injector) => {
         if (ref.componentTypes.length == 0) {
           throw new Error("Bootstrap at least one component before injecting Router.");
         }
         const componentType = ref.componentTypes[0];
-        const r = new Router(componentType, resolver, urlSerializer, outletMap, location);
+        const r = new Router(componentType, resolver, urlSerializer, outletMap, location, injector);
         r.resetConfig(config);
         ref.registerDisposeListener(() => r.dispose());
         return r;
       },
-      deps: [ApplicationRef, ComponentResolver, UrlSerializer, RouterOutletMap, Location]
+      deps: [ApplicationRef, ComponentResolver, UrlSerializer, RouterOutletMap, Location, Injector]
     },
 
     RouterOutletMap,

modules/@angular/router/src/config.ts

@@ -7,5 +7,6 @@ export interface Route {
   path?: string;
   component: Type | string;
   outlet?: string;
+  canActivate?: any[],
   children?: Route[];
 }

modules/@angular/router/src/create_router_state.ts

@@ -2,17 +2,19 @@ import { RouterStateCandidate, ActivatedRouteCandidate, RouterState, ActivatedRo
 import { TreeNode } from './utils/tree';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-export function createRouterState(curr: RouterStateCandidate, prev: RouterStateCandidate, prevState: RouterState): RouterState {
+export function createRouterState(curr: RouterStateCandidate, prevState: RouterState): RouterState {
-  const root = createNode(curr._root, prev ? prev._root : null, prevState ? prevState._root : null);
+  const root = createNode(curr._root, prevState ? prevState._root : null);
   const queryParams = prevState ? prevState.queryParams : new BehaviorSubject(curr.queryParams);
   const fragment = prevState ? prevState.fragment : new BehaviorSubject(curr.fragment);
-  return new RouterState(root, queryParams, fragment);
+  return new RouterState(root, queryParams, fragment, curr);
 }
 
-function createNode(curr:TreeNode<ActivatedRouteCandidate>, prev?:TreeNode<ActivatedRouteCandidate>, prevState?:TreeNode<ActivatedRoute>):TreeNode<ActivatedRoute> {
+function createNode(curr:TreeNode<ActivatedRouteCandidate>, prevState?:TreeNode<ActivatedRoute>):TreeNode<ActivatedRoute> {
-  if (prev && equalRouteCandidates(prev.value, curr.value)) {
+  if (prevState && equalRouteCandidates(prevState.value.candidate, curr.value)) {
     const value = prevState.value;
-    const children = createOrReuseChildren(curr, prev, prevState);
+    value.candidate = curr.value;
+    
+    const children = createOrReuseChildren(curr, prevState);
     return new TreeNode<ActivatedRoute>(value, children);
 
   } else {
@@ -22,11 +24,11 @@ function createNode(curr:TreeNode<ActivatedRouteCandidate>, prev?:TreeNode<Activ
   }
 }
 
-function createOrReuseChildren(curr:TreeNode<ActivatedRouteCandidate>, prev:TreeNode<ActivatedRouteCandidate>, prevState:TreeNode<ActivatedRoute>) {
+function createOrReuseChildren(curr:TreeNode<ActivatedRouteCandidate>, prevState:TreeNode<ActivatedRoute>) {
   return curr.children.map(child => {
-    const index = prev.children.findIndex(p => equalRouteCandidates(p.value, child.value));
+    const index = prevState.children.findIndex(p => equalRouteCandidates(p.value.candidate, child.value));
     if (index >= 0) {
-      return createNode(child, prev.children[index], prevState.children[index]);
+      return createNode(child, prevState.children[index]);
     } else {
       return createNode(child);
     }
@@ -34,7 +36,7 @@ function createOrReuseChildren(curr:TreeNode<ActivatedRouteCandidate>, prev:Tree
 }
 
 function createActivatedRoute(c:ActivatedRouteCandidate) {
-  return new ActivatedRoute(new BehaviorSubject(c.urlSegments), new BehaviorSubject(c.params), c.outlet, c.component);
+  return new ActivatedRoute(new BehaviorSubject(c.urlSegments), new BehaviorSubject(c.params), c.outlet, c.component, c);
 }
 
 function equalRouteCandidates(a: ActivatedRouteCandidate, b: ActivatedRouteCandidate): boolean {

modules/@angular/router/src/directives/router_outlet.ts

@@ -1,4 +1,4 @@
-import {Directive, ViewContainerRef, Attribute, ComponentRef, ComponentFactory, ResolvedReflectiveProvider, ReflectiveInjector} from '@angular/core';
+import {Injector, Directive, ViewContainerRef, Attribute, ComponentRef, ComponentFactory, ResolvedReflectiveProvider, ReflectiveInjector} from '@angular/core';
 import {RouterOutletMap} from '../router_outlet_map';
 import {PRIMARY_OUTLET} from '../shared';
 
@@ -8,7 +8,7 @@ export class RouterOutlet {
   public outletMap:RouterOutletMap;
 
   constructor(parentOutletMap:RouterOutletMap, private location:ViewContainerRef,
-              @Attribute('name') name:string) {
+              @Attribute('name') name:string, public injector: Injector) {
     parentOutletMap.registerOutlet(name ? name : PRIMARY_OUTLET, this);
   }
 

modules/@angular/router/src/router.ts

@@ -1,4 +1,4 @@
-import { ComponentResolver, ReflectiveInjector, Type } from '@angular/core';
+import { ComponentResolver, ReflectiveInjector, Type, Injector } from '@angular/core';
 import { Location } from '@angular/common';
 import { UrlSerializer } from './url_serializer';
 import { RouterOutletMap } from './router_outlet_map';
@@ -8,15 +8,18 @@ import { createRouterState } from './create_router_state';
 import { TreeNode } from './utils/tree';
 import { UrlTree, createEmptyUrlTree } from './url_tree';
 import { PRIMARY_OUTLET, Params } from './shared';
-import { createEmptyState, createEmptyStateCandidate, RouterState, RouterStateCandidate, ActivatedRoute, ActivatedRouteCandidate} from './router_state';
+import { createEmptyState, RouterState, RouterStateCandidate, ActivatedRoute, ActivatedRouteCandidate} from './router_state';
 import { RouterConfig } from './config';
 import { RouterOutlet } from './directives/router_outlet';
 import { createUrlTree } from './create_url_tree';
-import { forEach } from './utils/collection';
+import { forEach, and, shallowEqual } from './utils/collection';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/scan';
 import 'rxjs/add/operator/mergeMap';
+import {of} from 'rxjs/observable/of';
+import {forkJoin} from 'rxjs/observable/forkJoin';
 
 export interface NavigationExtras { relativeTo?: ActivatedRoute; queryParameters?: Params; fragment?: string; }
 
@@ -26,17 +29,15 @@ export interface NavigationExtras { relativeTo?: ActivatedRoute; queryParameters
 export class Router {
   private currentUrlTree: UrlTree;
   private currentRouterState: RouterState;
-  private currentRouterStateCandidate: RouterStateCandidate;
   private config: RouterConfig;
   private locationSubscription: Subscription;
 
   /**
    * @internal
    */
-  constructor(private rootComponentType:Type, private resolver: ComponentResolver, private urlSerializer: UrlSerializer, private outletMap: RouterOutletMap, private location: Location) {
+  constructor(private rootComponentType:Type, private resolver: ComponentResolver, private urlSerializer: UrlSerializer, private outletMap: RouterOutletMap, private location: Location, private injector: Injector) {
     this.currentUrlTree = createEmptyUrlTree();
     this.currentRouterState = createEmptyState(rootComponentType);
-    this.currentRouterStateCandidate = createEmptyStateCandidate(rootComponentType);
     this.setUpLocationChangeListener();
     this.navigateByUrl(this.location.path());
   }
@@ -159,26 +160,27 @@ export class Router {
     });
   }
 
-  private runNavigate(url:UrlTree, pop?:boolean):Observable<void> {
+  private runNavigate(url:UrlTree, pop?:boolean):Observable<any> {
-    let candidate;
     let state;
     const r = recognize(this.rootComponentType, this.config, url).mergeMap((newRouterStateCandidate) => {
       return resolve(this.resolver, newRouterStateCandidate);
 
     }).map((routerStateCandidate) => {
-      candidate = routerStateCandidate;
+      return createRouterState(routerStateCandidate, this.currentRouterState);
-      return createRouterState(routerStateCandidate, this.currentRouterStateCandidate, this.currentRouterState);
 
     }).map((newState:RouterState) => {
       state = newState;
+
+    }).mergeMap(_ => {
+      return new GuardChecks(state.candidate, this.currentRouterState.candidate, this.injector).check(this.outletMap);
     });
 
-    r.subscribe((_) => {
+    r.subscribe((shouldActivate) => {
-      new ActivateRoutes(state, this.currentRouterState, candidate).activate(this.outletMap);
+      if (!shouldActivate) return;
+      new ActivateRoutes(state, this.currentRouterState).activate(this.outletMap);
 
       this.currentUrlTree = url;
       this.currentRouterState = state;
-      this.currentRouterStateCandidate = candidate;
 
       if (!pop) {
         this.location.go(this.urlSerializer.serialize(url));
@@ -188,59 +190,104 @@ export class Router {
   }
 }
 
+class GuardChecks {
+  private checks = [];
+  constructor(private future: RouterStateCandidate, private curr: RouterStateCandidate, private injector: Injector) {}
+
+  check(parentOutletMap: RouterOutletMap): Observable<boolean> {
+    const futureRoot = this.future._root;
+    const currRoot = this.curr ? this.curr._root : null;
+    this.traverseChildRoutes(futureRoot, currRoot, parentOutletMap);
+    if (this.checks.length === 0) return of(true);
+    return forkJoin(this.checks.map(s => this.runCanActivate(s))).map(and);
+  }
+
+  private traverseChildRoutes(futureNode: TreeNode<ActivatedRouteCandidate>,
+                              currNode: TreeNode<ActivatedRouteCandidate> | null,
+                              outletMap: RouterOutletMap): void {
+    const prevChildren = nodeChildrenAsMap(currNode);
+    futureNode.children.forEach(c => {
+      this.traverseRoutes(c, prevChildren[c.value.outlet], outletMap);
+      delete prevChildren[c.value.outlet];
+    });
+    forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(outletMap._outlets[k]));
+  }
+
+  traverseRoutes(futureNode: TreeNode<ActivatedRouteCandidate>, currNode: TreeNode<ActivatedRouteCandidate> | null,
+                 parentOutletMap: RouterOutletMap): void {
+    const future = futureNode.value;
+    const curr = currNode ? currNode.value : null;
+
+    if (future === curr) {
+      if (!shallowEqual(future.params, curr.params)) {
+        this.checks.push(future);
+      }
+      this.traverseChildRoutes(futureNode, currNode, null);
+    } else {
+      this.deactivateOutletAndItChildren(null);
+      this.checks.push(future);
+      this.traverseChildRoutes(futureNode, null, null);
+    }
+  }
+
+  private deactivateOutletAndItChildren(outlet: RouterOutlet): void {}
+
+  private runCanActivate(future: ActivatedRouteCandidate): Observable<boolean> {
+    const canActivate = future._routeConfig ? future._routeConfig.canActivate : null;
+    if (!canActivate || canActivate.length === 0) return of(true);
+    return forkJoin(canActivate.map(c => {
+      const guard = this.injector.get(c);
+      return of(guard(future, this.future));
+    })).map(and);
+  }
+}
+
 class ActivateRoutes {
-  constructor(private futureState: RouterState, private currState: RouterState,
+  constructor(private futureState: RouterState, private currState: RouterState) {}
-              private futureStateCandidate: RouterStateCandidate) {}
 
   activate(parentOutletMap: RouterOutletMap):void {
     const futureRoot = this.futureState._root;
     const currRoot = this.currState ? this.currState._root : null;
-    const futureCandidateRoot = this.futureStateCandidate._root;
+
-    this.activateChildRoutes(futureRoot, currRoot, futureCandidateRoot, parentOutletMap);
+    pushQueryParamsAndFragment(this.futureState);
+    this.activateChildRoutes(futureRoot, currRoot, parentOutletMap);
   }
 
   private activateChildRoutes(futureNode: TreeNode<ActivatedRoute>,
                               currNode: TreeNode<ActivatedRoute> | null,
-                              futureCandidateNode: TreeNode<ActivatedRouteCandidate>,
                               outletMap: RouterOutletMap): void {
     const prevChildren = nodeChildrenAsMap(currNode);
-    for (let i = 0; i < futureNode.children.length; ++i) {
+    futureNode.children.forEach(c => {
-      const c = futureNode.children[i];
+      this.activateRoutes(c, prevChildren[c.value.outlet], outletMap);
-      const cc = futureCandidateNode.children[i];
-      this.activateRoutes(c, prevChildren[c.value.outlet], cc, outletMap);
       delete prevChildren[c.value.outlet];
-    }
+    });
     forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(outletMap._outlets[k]));
   }
 
-
+  activateRoutes(futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute> | null,
-  activateRoutes(futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
-                 futureCandidateNode: TreeNode<ActivatedRouteCandidate>,
                  parentOutletMap: RouterOutletMap): void {
     const future = futureNode.value;
-    const futureCandidate = futureCandidateNode.value;
     const curr = currNode ? currNode.value : null;
     const outlet = getOutlet(parentOutletMap, futureNode.value);
 
     if (future === curr) {
-      pushValues(future, futureCandidate);
+      pushValues(future);
-      this.activateChildRoutes(futureNode, currNode, futureCandidateNode, outlet.outletMap);
+      this.activateChildRoutes(futureNode, currNode, outlet.outletMap);
     } else {
       this.deactivateOutletAndItChildren(outlet);
       const outletMap = new RouterOutletMap();
-      this.activateNewRoutes(outletMap, future, futureCandidate, outlet);
+      this.activateNewRoutes(outletMap, future, outlet);
-      this.activateChildRoutes(futureNode, currNode, futureCandidateNode, outletMap);
+      this.activateChildRoutes(futureNode, null, outletMap);
     }
   }
 
-  private activateNewRoutes(outletMap: RouterOutletMap, future: ActivatedRoute,
+  private activateNewRoutes(outletMap: RouterOutletMap, future: ActivatedRoute, outlet: RouterOutlet): void {
-                            futureCandidate: ActivatedRouteCandidate, outlet: RouterOutlet): void {
     const resolved = ReflectiveInjector.resolve([
       {provide: ActivatedRoute, useValue: future},
       {provide: RouterOutletMap, useValue: outletMap}
     ]);
-    outlet.activate(futureCandidate._resolvedComponentFactory, resolved, outletMap);
+    outlet.activate(future.candidate._resolvedComponentFactory, resolved, outletMap);
-    pushValues(future, futureCandidate);
+    pushValues(future);
   }
 
   private deactivateOutletAndItChildren(outlet: RouterOutlet): void {
@@ -251,12 +298,24 @@ class ActivateRoutes {
   }
 }
 
-function pushValues(route: ActivatedRoute, candidate: ActivatedRouteCandidate): void {
+function pushValues(route: ActivatedRoute): void {
-  (<any>route.urlSegments).next(candidate.urlSegments);
+  if (!shallowEqual(route.candidate.params, (<any>route.params).value)) {
-  (<any>route.params).next(candidate.params);
+    (<any>route.urlSegments).next(route.candidate.urlSegments);
+    (<any>route.params).next(route.candidate.params);
+  }
 }
 
-function nodeChildrenAsMap(node: TreeNode<ActivatedRoute>|null) {
+function pushQueryParamsAndFragment(state: RouterState): void {
+  if (!shallowEqual(state.candidate.queryParams, (<any>state.queryParams).value)) {
+    (<any>state.queryParams).next(state.candidate.queryParams);
+  }
+
+  if (state.candidate.fragment !== (<any>state.fragment).value) {
+    (<any>state.fragment).next(state.candidate.fragment);
+  }
+}
+
+function nodeChildrenAsMap(node: TreeNode<any>|null) {
   return node ?
     node.children.reduce(
       (m, c) => {

modules/@angular/router/src/router_state.ts

@@ -22,21 +22,22 @@ import { Type, ComponentFactory } from '@angular/core';
  * ```
  */
 export class RouterState extends Tree<ActivatedRoute> {
-  constructor(root: TreeNode<ActivatedRoute>, public queryParams: Observable<Params>, public fragment: Observable<string>) {
+  constructor(root: TreeNode<ActivatedRoute>, public queryParams: Observable<Params>, public fragment: Observable<string>, public candidate: RouterStateCandidate) {
     super(root);
   }
 }
 
 export function createEmptyState(rootComponent: Type): RouterState {
+  const candidate = createEmptyStateCandidate(rootComponent);
   const emptyUrl = new BehaviorSubject([new UrlSegment("", {}, PRIMARY_OUTLET)]);
   const emptyParams = new BehaviorSubject({});
   const emptyQueryParams = new BehaviorSubject({});
   const fragment = new BehaviorSubject("");
-  const activated = new ActivatedRoute(emptyUrl, emptyParams, PRIMARY_OUTLET, rootComponent);
+  const activated = new ActivatedRoute(emptyUrl, emptyParams, PRIMARY_OUTLET, rootComponent, candidate.root);
-  return new RouterState(new TreeNode<ActivatedRoute>(activated, []), emptyQueryParams, fragment);
+  return new RouterState(new TreeNode<ActivatedRoute>(activated, []), emptyQueryParams, fragment, candidate);
 }
 
-export function createEmptyStateCandidate(rootComponent: Type): RouterStateCandidate {
+function createEmptyStateCandidate(rootComponent: Type): RouterStateCandidate {
   const emptyUrl = [new UrlSegment("", {}, PRIMARY_OUTLET)];
   const emptyParams = {};
   const emptyQueryParams = {};
@@ -62,7 +63,9 @@ export class ActivatedRoute {
   constructor(public urlSegments: Observable<UrlSegment[]>,
               public params: Observable<Params>,
               public outlet: string,
-              public component: Type | string) {}
+              public component: Type | string,
+              public candidate: ActivatedRouteCandidate
+  ) {}
 }
 
 export class ActivatedRouteCandidate {

modules/@angular/router/src/utils/collection.ts

@@ -28,6 +28,10 @@ export function first<T>(a: T[]): T | null {
   return a.length > 0 ? a[0] : null;
 }
 
+export function and(bools: boolean[]): boolean {
+  return bools.reduce((a,b) => a && b, true);
+}
+
 export function merge<V>(m1: {[key: string]: V}, m2: {[key: string]: V}): {[key: string]: V} {
   var m: {[key: string]: V} = {};
 

modules/@angular/router/test/create_router_state.spec.ts

@@ -1,13 +1,12 @@
 import {DefaultUrlSerializer} from '../src/url_serializer';
 import {UrlTree} from '../src/url_tree';
 import {Params, PRIMARY_OUTLET} from '../src/shared';
-import {ActivatedRoute, ActivatedRouteCandidate, RouterStateCandidate, createEmptyStateCandidate, createEmptyState} from '../src/router_state';
+import {ActivatedRoute, ActivatedRouteCandidate, RouterStateCandidate, createEmptyState} from '../src/router_state';
 import {createRouterState} from '../src/create_router_state';
 import {recognize} from '../src/recognize';
 import {RouterConfig} from '../src/config';
 
 describe('create router state', () => {
-  const emptyCandidate = () => createEmptyStateCandidate(RootComponent);
   const emptyState = () => createEmptyState(RootComponent);
 
   it('should work create new state', () => {
@@ -15,7 +14,7 @@ describe('create router state', () => {
       {path: 'a', component: ComponentA},
       {path: 'b', component: ComponentB, outlet: 'left'},
       {path: 'c', component: ComponentC, outlet: 'right'}
-    ], "a(left:b//right:c)"), emptyCandidate(), emptyState());
+    ], "a(left:b//right:c)"), emptyState());
 
     checkActivatedRoute(state.root, RootComponent);
 
@@ -32,10 +31,8 @@ describe('create router state', () => {
       {path: 'c', component: ComponentC, outlet: 'left'}
     ];
 
-    const prevCandidate = createState(config, "a(left:b)");
+    const prevState = createRouterState(createState(config, "a(left:b)"), emptyState());
-    const prevState = createRouterState(prevCandidate, emptyCandidate(), emptyState());
+    const state = createRouterState(createState(config, "a(left:c)"), prevState);
-
-    const state = createRouterState(createState(config, "a(left:c)"), prevCandidate, prevState);
 
     expect(prevState.root).toBe(state.root);
     const prevC = prevState.children(prevState.root);

modules/@angular/router/test/create_url_tree.spec.ts

@@ -175,6 +175,6 @@ function create(start: UrlSegment | null, tree: UrlTree, commands: any[], queryP
   if (!start) {
     expect(start).toBeDefined();
   }
-  const a = new ActivatedRoute(new BehaviorSubject([start]), <any>null, PRIMARY_OUTLET, "someComponent");
+  const a = new ActivatedRoute(new BehaviorSubject([start]), <any>null, PRIMARY_OUTLET, "someComponent", null);
   return createUrlTree(a, tree, commands, queryParameters, fragment);
 }

modules/@angular/router/test/router.spec.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Injector} from '@angular/core';
 import {
   describe,
   it,
@@ -15,7 +15,7 @@ import {
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import { ComponentResolver } from '@angular/core';
 import { SpyLocation } from '@angular/common/testing';
-import { UrlSerializer, DefaultUrlSerializer, RouterOutletMap, Router, ActivatedRoute, ROUTER_DIRECTIVES } from '../src/index';
+import { UrlSerializer, DefaultUrlSerializer, RouterOutletMap, Router, ActivatedRoute, ROUTER_DIRECTIVES, Params } from '../src/index';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
@@ -26,13 +26,14 @@ describe("Integration", () => {
     {provide: Location, useClass: SpyLocation},
     {
       provide: Router,
-      useFactory: (resolver, urlSerializer, outletMap, location) =>
+      useFactory: (resolver, urlSerializer, outletMap, location, injector) =>
-        new Router(RootCmp, resolver, urlSerializer, outletMap, location),
+        new Router(RootCmp, resolver, urlSerializer, outletMap, location, injector),
-      deps: [ComponentResolver, UrlSerializer, RouterOutletMap, Location]
+      deps: [ComponentResolver, UrlSerializer, RouterOutletMap, Location, Injector]
     },
     {provide: ActivatedRoute, useFactory: (r) => r.routerState.root, deps: [Router]},
   ]);
-  
+
+
   it('should update location when navigating',
     fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => {
       router.resetConfig([
@@ -156,6 +157,48 @@ describe("Integration", () => {
       expect(fixture.debugElement.nativeElement).toHaveText('');
     })));
 
+  it('should set query params and fragment',
+    fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
+      router.resetConfig([
+        { path: 'query', component: QueryParamsAndFragmentCmp }
+      ]);
+
+      const fixture = tcb.createFakeAsync(RootCmp);
+
+      router.navigateByUrl('/query?name=1#fragment1');
+      advance(fixture);
+      expect(fixture.debugElement.nativeElement).toHaveText('query: 1 fragment: fragment1');
+
+      router.navigateByUrl('/query?name=2#fragment2');
+      advance(fixture);
+      expect(fixture.debugElement.nativeElement).toHaveText('query: 2 fragment: fragment2');
+    })));
+
+  it('should push params only when they change',
+    fakeAsync(inject([Router, TestComponentBuilder], (router, tcb:TestComponentBuilder) => {
+      router.resetConfig([
+        { path: 'team/:id', component: TeamCmp, children: [
+          { path: 'user/:name', component: UserCmp }
+        ] }
+      ]);
+
+      const fixture = tcb.createFakeAsync(RootCmp);
+
+      router.navigateByUrl('/team/22/user/victor');
+      advance(fixture);
+      const team = fixture.debugElement.children[1].componentInstance;
+      const user = fixture.debugElement.children[1].children[1].componentInstance;
+
+      expect(team.recordedParams).toEqual([{id: '22'}]);
+      expect(user.recordedParams).toEqual([{name: 'victor'}]);
+
+      router.navigateByUrl('/team/22/user/fedor');
+      advance(fixture);
+
+      expect(team.recordedParams).toEqual([{id: '22'}]);
+      expect(user.recordedParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
+    })));
+
   describe("router links", () => {
     it("should support string router links",
       fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
@@ -238,6 +281,52 @@ describe("Integration", () => {
         expect(fixture.debugElement.nativeElement).toHaveText('link');
       })));
   });
+
+  describe("guards", () => {
+    describe("CanActivate", () => {
+      describe("should not activate a route when CanActivate returns false", () => {
+        beforeEachProviders(() => [
+          {provide: 'alwaysFalse', useValue: (a, b) => false}
+        ]);
+
+        it('works',
+          fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => {
+            router.resetConfig([
+              { path: 'team/:id', component: TeamCmp, canActivate: ["alwaysFalse"] }
+            ]);
+
+            const fixture = tcb.createFakeAsync(RootCmp);
+            advance(fixture);
+
+            router.navigateByUrl('/team/22');
+            advance(fixture);
+
+            expect(location.path()).toEqual('');
+          })));
+      });
+
+      describe("should activate a route when CanActivate returns true", () => {
+        beforeEachProviders(() => [
+          {provide: 'alwaysFalse', useValue: (a, b) => true}
+        ]);
+
+        it('works',
+          fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => {
+            router.resetConfig([
+              { path: 'team/:id', component: TeamCmp, canActivate: ["alwaysFalse"] }
+            ]);
+
+            const fixture = tcb.createFakeAsync(RootCmp);
+            advance(fixture);
+
+            router.navigateByUrl('/team/22');
+            advance(fixture);
+
+            expect(location.path()).toEqual('/team/22');
+          })));
+      });
+    });
+  });
 });
 
 @Component({
@@ -276,9 +365,11 @@ class SimpleCmp {
 })
 class TeamCmp {
   id: Observable<string>;
+  recordedParams: Params[] = [];
 
   constructor(route: ActivatedRoute) {
     this.id = route.params.map(p => p['id']);
+    route.params.forEach(_ => this.recordedParams.push(_));
   }
 }
 
@@ -289,8 +380,26 @@ class TeamCmp {
 })
 class UserCmp {
   name: Observable<string>;
+  recordedParams: Params[] = [];
+
   constructor(route: ActivatedRoute) {
     this.name = route.params.map(p => p['name']);
+    route.params.forEach(_ => this.recordedParams.push(_));
+  }
+}
+
+@Component({
+  selector: 'query-cmp',
+  template: `query: {{name | async}} fragment: {{fragment | async}}`,
+  directives: [ROUTER_DIRECTIVES]
+})
+class QueryParamsAndFragmentCmp {
+  name: Observable<string>;
+  fragment: Observable<string>;
+
+  constructor(router: Router) {
+    this.name = router.routerState.queryParams.map(p => p['name']);
+    this.fragment = router.routerState.fragment;
   }
 }