fix(router): handle router outlets in ngIf

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

@@ -83,9 +83,12 @@ export class RouterLink {
       return true;
     }
 
-    this.router.navigate(
+    this.urlTree = this.router.createUrlTreeUsingFutureUrl(
         this.commands,
         {relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment});
+
+    this.router.navigateByUrl(this.urlTree);
+
     return false;
   }
 }
@@ -147,9 +150,10 @@ export class RouterLinkWithHref implements OnChanges, OnDestroy {
   }
 
   private updateTargetUrlAndHref(): void {
-    this.urlTree = this.router.createUrlTree(
+    this.urlTree = this.router.createUrlTreeUsingFutureUrl(
         this.commands,
         {relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment});
+
     if (this.urlTree) {
       this.href = this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(this.urlTree));
     }

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

@@ -71,7 +71,7 @@ export class RouterOutlet {
     } catch (e) {
       if (!(e instanceof NoComponentFactoryError)) throw e;
 
-      // TODO: vsavkin uncomment this once CompoentResolver is deprecated
+      // TODO: vsavkin uncomment this once ComponentResolver is deprecated
       // const componentName = component ? component.name : null;
       // console.warn(
       //     `'${componentName}' not found in precompile array.  To ensure all components referred
@@ -84,5 +84,6 @@ export class RouterOutlet {
 
     const inj = ReflectiveInjector.fromResolvedProviders(providers, this.location.parentInjector);
     this.activated = this.location.createComponent(factory, this.location.length, inj, []);
+    this.activated.changeDetectorRef.detectChanges();
   }
 }

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

@@ -123,6 +123,7 @@ export class Router {
   private routerEvents: Subject<Event>;
   private navigationId: number = 0;
   private config: RouterConfig;
+  private futureUrlTree: UrlTree;
 
   /**
    * Creates the router service.
@@ -134,6 +135,7 @@ export class Router {
     this.resetConfig(config);
     this.routerEvents = new Subject<Event>();
     this.currentUrlTree = createEmptyUrlTree();
+    this.futureUrlTree = this.currentUrlTree;
     this.currentRouterState = createEmptyState(this.currentUrlTree, this.rootComponentType);
   }
 
@@ -221,6 +223,18 @@ export class Router {
     return createUrlTree(a, this.currentUrlTree, commands, queryParams, fragment);
   }
 
+  /**
+   * Used by RouterLinkWithHref to update HREFs.
+   * We have to use the futureUrl because we run change detection ind the middle of activation when
+   * the current url has not been updated yet.
+   * @internal
+   */
+  createUrlTreeUsingFutureUrl(
+      commands: any[], {relativeTo, queryParams, fragment}: NavigationExtras = {}): UrlTree {
+    const a = relativeTo ? relativeTo : this.routerState.root;
+    return createUrlTree(a, this.futureUrlTree, commands, queryParams, fragment);
+  }
+
   /**
    * Navigate based on the provided url. This navigation is always absolute.
    *
@@ -293,20 +307,21 @@ export class Router {
     }
 
     return new Promise((resolvePromise, rejectPromise) => {
-      let updatedUrl: UrlTree;
       let state: RouterState;
       let navigationIsSuccessful: boolean;
       let preActivation: PreActivation;
       applyRedirects(url, this.config)
           .mergeMap(u => {
-            updatedUrl = u;
+            this.futureUrlTree = u;
             return recognize(
-                this.rootComponentType, this.config, updatedUrl, this.serializeUrl(updatedUrl));
+                this.rootComponentType, this.config, this.futureUrlTree,
+                this.serializeUrl(this.futureUrlTree));
           })
 
           .mergeMap((newRouterStateSnapshot) => {
             this.routerEvents.next(new RoutesRecognized(
-                id, this.serializeUrl(url), this.serializeUrl(updatedUrl), newRouterStateSnapshot));
+                id, this.serializeUrl(url), this.serializeUrl(this.futureUrlTree),
+                newRouterStateSnapshot));
             return resolve(this.resolver, newRouterStateSnapshot);
 
           })
@@ -341,10 +356,10 @@ export class Router {
 
             new ActivateRoutes(state, this.currentRouterState).activate(this.outletMap);
 
-            this.currentUrlTree = updatedUrl;
+            this.currentUrlTree = this.futureUrlTree;
             this.currentRouterState = state;
             if (!preventPushState) {
-              let path = this.urlSerializer.serialize(updatedUrl);
+              let path = this.urlSerializer.serialize(this.futureUrlTree);
               if (this.location.isCurrentPathEqualTo(path)) {
                 this.location.replaceState(path);
               } else {
@@ -355,8 +370,8 @@ export class Router {
           })
           .then(
               () => {
-                this.routerEvents.next(
-                    new NavigationEnd(id, this.serializeUrl(url), this.serializeUrl(updatedUrl)));
+                this.routerEvents.next(new NavigationEnd(
+                    id, this.serializeUrl(url), this.serializeUrl(this.futureUrlTree)));
                 resolvePromise(navigationIsSuccessful);
               },
               e => {