feat(router): provide meaningful toString impls

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

@@ -33,6 +33,10 @@ export class RouterState extends Tree<ActivatedRoute> {
       public fragment: Observable<string>, public snapshot: RouterStateSnapshot) {
     super(root);
   }
+
+  toString(): string {
+    return this.snapshot.toString();
+  }
 }
 
 export function createEmptyState(rootComponent: Type): RouterState {
@@ -89,6 +93,10 @@ export class ActivatedRoute {
       futureSnapshot: ActivatedRouteSnapshot) {
     this._futureSnapshot = futureSnapshot;
   }
+
+  toString(): string {
+    return this.snapshot ? this.snapshot.toString() : `Future(${this._futureSnapshot})`;
+  }
 }
 
 /**
@@ -125,6 +133,12 @@ export class ActivatedRouteSnapshot {
     this._routeConfig = routeConfig;
     this._lastUrlSegment = lastUrlSegment;
   }
+
+  toString(): string {
+    const url = this.urlSegments.map(s => s.toString()).join("/");
+    const matched = this._routeConfig ? this._routeConfig.path : '';
+    return `Route(url:'${url}', path:'${matched}')`;
+  }
 }
 
 /**
@@ -149,8 +163,18 @@ export class RouterStateSnapshot extends Tree<ActivatedRouteSnapshot> {
       public fragment: string|null) {
     super(root);
   }
+
+  toString(): string {
+    return serializeNode(this._root);
+  }
 }
 
+function serializeNode(node: TreeNode<ActivatedRouteSnapshot>): string {
+  const c = node.children.length > 0 ? ` { ${node.children.map(serializeNode).join(", ")} } ` : '';
+  return `${node.value}${c}`;
+}
+
+
 /**
  * The expectation is that the activate route is created with the right set of parameters.
  * So we push new values into the observables only when they are not the initial values.

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

@@ -1,6 +1,7 @@
 import {PRIMARY_OUTLET} from './shared';
 import {shallowEqual} from './utils/collection';
 import {Tree, TreeNode} from './utils/tree';
+import {DefaultUrlSerializer, serializeSegment} from './url_serializer';
 
 export function createEmptyUrlTree() {
   return new UrlTree(
@@ -19,6 +20,10 @@ export class UrlTree extends Tree<UrlSegment> {
       public fragment: string|null) {
     super(root);
   }
+
+  toString(): string {
+    return new DefaultUrlSerializer().serialize(this);
+  }
 }
 
 export class UrlSegment {
@@ -28,16 +33,8 @@ export class UrlSegment {
   constructor(
       public path: string, public parameters: {[key: string]: string}, public outlet: string) {}
 
-  toString() {
+  toString(): string {
-    const params = [];
+    return serializeSegment(this);
-    for (let prop in this.parameters) {
-      if (this.parameters.hasOwnProperty(prop)) {
-        params.push(`${prop}=${this.parameters[prop]}`);
-      }
-    }
-    const paramsString = params.length > 0 ? `(${params.join(',')})` : '';
-    const outlet = this.outlet === PRIMARY_OUTLET ? '' : `${this.outlet}:`;
-    return `${outlet}${this.path}${paramsString}`;
   }
 }
 

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

@@ -70,4 +70,8 @@ function contains<T>(tree: TreeNode<T>, subtree: TreeNode<T>): boolean {
 
 export class TreeNode<T> {
   constructor(public value: T, public children: TreeNode<T>[]) {}
+
+  toString(): string {
+    return `TreeNode(${this.value})`;
+  }
 }