fix(angular1_router): delay view update until activate promise gets fullfilled

If the $routerOnActivate hook returns a promise, the navigation
is commited, once the promise gets fullfilled but the view
is updated immediately.

This commit delays the view update so that both (view and url) are
updated at the same time.

Closes #7777

modules/angular1_router/src/ng_outlet.ts

@@ -118,14 +118,16 @@ function ngOutletDirective($animate, $q: ng.IQService, $rootRouter) {
         newScope.$$router = this.controller.$$router;
         this.deferredActivation = $q.defer();
 
-        let clone = $transclude(newScope, clone => {
+        let clone = $transclude(newScope, clone => {});
+
+        let activateView = () => {
           $animate.enter(clone, null, this.currentElement || element);
           this.cleanupLastView();
-        });
+          this.currentElement = clone;
+          this.currentScope = newScope;
+        };
 
-        this.currentElement = clone;
+        return this.deferredActivation.promise.then(activateView, activateView);
-        this.currentScope = newScope;
-        return this.deferredActivation.promise;
       }
     }
 

modules/angular1_router/test/integration/lifecycle_hook_spec.js

@@ -3,6 +3,7 @@
 describe('Navigation lifecycle', function () {
   var elt,
     $compile,
+    $q,
     $rootScope,
     $rootRouter,
     $compileProvider;
@@ -14,8 +15,9 @@ describe('Navigation lifecycle', function () {
       $compileProvider = _$compileProvider_;
     });
 
-    inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
+    inject(function (_$compile_, _$q_, _$rootScope_, _$rootRouter_) {
       $compile = _$compile_;
+      $q = _$q_;
       $rootScope = _$rootScope_;
       $rootRouter = _$rootRouter_;
     });
@@ -89,6 +91,46 @@ describe('Navigation lifecycle', function () {
                                      instructionFor('oneCmp'));
   });
 
+  describe('activate hook with promise', () => {
+    var activateDeferred;
+    beforeEach(() => {
+      activateDeferred = $q.defer();
+      var activate = registerComponent('activateCmp', {
+        template: 'hi',
+        $routerOnActivate: function() {
+          return activateDeferred.promise;
+        }
+      });
+
+      $rootRouter.config([
+        { path: '/user/:name', component: 'oneCmp' },
+        { path: '/post', component: 'activateCmp' },
+      ]);
+      compile('<div ng-outlet></div>');
+
+      $rootRouter.navigateByUrl('/user/fabian');
+      $rootScope.$digest();
+      $rootRouter.navigateByUrl('/post');
+      $rootScope.$digest();
+    });
+
+    it('should update the view once the promise gets resolved', () => {
+      expect(elt.text()).toBe('one');
+
+      activateDeferred.resolve();
+      $rootScope.$digest();
+      expect(elt.text()).toBe('hi');
+    });
+
+    it('should update the view once the promise gets rejected', () => {
+      expect(elt.text()).toBe('one');
+
+      activateDeferred.reject();
+      $rootScope.$digest();
+      expect(elt.text()).toBe('hi');
+    });
+  });
+
   it('should inject $scope into the controller constructor', function () {
     var injectedScope;
     registerComponent('userCmp', {