fix(RouterInstruction): Pass the subscriber back through NgZone (#70)

lib/router-instruction.ts

@@ -9,10 +9,11 @@ import 'rxjs/add/operator/let';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/operator/observeOn';
 import { Observable } from 'rxjs/Observable';
-import { async } from 'rxjs/scheduler/async';
-import { provide, Provider, Injector, OpaqueToken } from 'angular2/core';
+import { asap } from 'rxjs/scheduler/asap';
+import { provide, Provider, Injector, OpaqueToken, NgZone } from 'angular2/core';
 import { parse as parseQueryString } from 'query-string';
 
+import { ZoneOperator } from './zone';
 import { compose } from './util';
 import { Router, LocationChange } from './router';
 import { Routes, Route, ROUTES } from './route';
@@ -47,13 +48,14 @@ export class RouterInstruction extends Observable<NextInstruction> { }
 
 
 function createRouterInstruction(
+  zone: NgZone,
   router$: Router,
   traverser: RouteTraverser,
   locationMiddleware: Middleware[],
   routerInstructionMiddleware: Middleware[]
 ): RouterInstruction {
   return router$
-    .observeOn(async)
+    .observeOn(asap)
     .distinctUntilChanged((prev, next) => prev.path === next.path)
     .let<LocationChange>(compose(...locationMiddleware))
     .switchMap(change => {
@@ -71,14 +73,15 @@ function createRouterInstruction(
     })
     .filter(match => !!match)
     .let<NextInstruction>(compose(...routerInstructionMiddleware))
+    .lift(new ZoneOperator(zone))
     .publishReplay(1)
     .refCount();
 }
 
 
 export const ROUTE_SET_PROVIDERS = [
   provide(RouterInstruction, {
-    deps: [ Router, RouteTraverser, ROUTER_MIDDLEWARE, ROUTER_INSTRUCTION_MIDDLEWARE ],
+    deps: [ NgZone, Router, RouteTraverser, ROUTER_MIDDLEWARE, ROUTER_INSTRUCTION_MIDDLEWARE ],
     useFactory: createRouterInstruction
   }),
   useRouterMiddleware(identity),

lib/zone.ts

@@ -0,0 +1,22 @@
+import { NgZone } from 'angular2/core';
+import { Operator } from 'rxjs/Operator';
+import { Subscriber } from 'rxjs/Subscriber';
+
+
+export class ZoneOperator<T> implements Operator<T, T> {
+  constructor(private _zone: NgZone) { }
+
+  call(subscriber: Subscriber<T>): Subscriber<T> {
+    return new ZoneSubscriber(subscriber, this._zone);
+  }
+}
+
+class ZoneSubscriber<T> extends Subscriber<T> {
+  constructor(destination: Subscriber<T>, private _zone: NgZone) {
+    super(destination);
+  }
+
+  protected _next(value: T) {
+    this._zone.run(() => this.destination.next(value));
+  }
+}

spec/route-set.spec.ts → spec/router-instruction.spec.ts

@@ -1,5 +1,5 @@
 import 'rxjs/add/operator/withLatestFrom';
-import { Injector, provide } from 'angular2/core';
+import { Injector, provide, NgZone } from 'angular2/core';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
 import { LocationStrategy } from 'angular2/src/router/location/location_strategy';
@@ -15,6 +15,7 @@ describe('Route Set', function() {
   const routes = ['a', 'c', 'c'];
 
   let mockTraverser: any;
+  let mockZone: any;
   let routerInstruction: RouterInstruction;
   let router: Router;
 
@@ -25,13 +26,21 @@ describe('Route Set', function() {
       }
     };
 
+    mockZone = {
+      run(fn) {
+        return fn();
+      }
+    };
+
     spyOn(mockTraverser, 'find').and.callThrough();
+    spyOn(mockZone, 'run').and.callThrough();
 
     const injector = Injector.resolveAndCreate([
       ROUTER_PROVIDERS,
       ROUTE_SET_PROVIDERS,
       provide(RouteTraverser, { useValue: mockTraverser }),
-      provide(LocationStrategy, { useClass: MockLocationStrategy })
+      provide(LocationStrategy, { useClass: MockLocationStrategy }),
+      provide(NgZone, { useValue: mockZone })
     ]);
 
     routerInstruction = injector.get(RouterInstruction);
@@ -75,4 +84,14 @@ describe('Route Set', function() {
       done();
     });
   });
+
+  it('should pass the subscription back into the Angular zone', function(done) {
+    router.go('/');
+
+    routerInstruction.subscribe(() => {
+      expect(mockZone.run).toHaveBeenCalled();
+
+      done();
+    });
+  });
 });

spec/tsconfig.json

@@ -24,7 +24,7 @@
     "./middleware.spec.ts",
     "./params.spec.ts",
     "./redirect.spec.ts",
-    "./route-set.spec.ts",
+    "./router-instruction.spec.ts",
     "./route-traverser.spec.ts",
     "./route-view.spec.ts",
     "./route.spec.ts",