fix(router): routerLinkActive should only set classes after the router has successfully navigated

modules/@angular/common/testing.ts

@@ -7,3 +7,4 @@
  */
 
 export {SpyLocation} from './testing/location_mock';
+export {MockLocationStrategy} from './testing/mock_location_strategy';

modules/@angular/common/testing/mock_location_strategy.ts

@@ -16,6 +16,8 @@ import {EventEmitter, ObservableWrapper} from '../src/facade/async';
 /**
  * A mock implementation of {@link LocationStrategy} that allows tests to fire simulated
  * location events.
+ *
+ * @stable
  */
 @Injectable()
 export class MockLocationStrategy extends LocationStrategy {

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

@@ -94,7 +94,7 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
   ngOnDestroy(): any { this.subscription.unsubscribe(); }
 
   private update(): void {
-    if (!this.links || !this.linksWithHrefs) return;
+    if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
 
     const currentUrlTree = this.router.parseUrl(this.router.url);
     const isActiveLinks = this.reduceList(currentUrlTree, this.links);

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

@@ -133,6 +133,13 @@ export class Router {
   private config: Routes;
   private configLoader: RouterConfigLoader;
 
+  /**
+   * Indicates if at least one navigation happened.
+   *
+   * @experimental
+   */
+  navigated: boolean = false;
+
   /**
    * Creates the router service.
    */
@@ -385,6 +392,7 @@ export class Router {
           })
           .then(
               () => {
+                this.navigated = true;
                 this.routerEvents.next(
                     new NavigationEnd(id, this.serializeUrl(url), this.serializeUrl(appliedUrl)));
                 resolvePromise(navigationIsSuccessful);

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

@@ -1194,6 +1194,29 @@ describe('Integration', () => {
              expect(nativeButton.className).toEqual('');
            })));
 
+    it('should not set the class until the first navigation succeeds',
+       fakeAsync(inject(
+           [Router, TestComponentBuilder, Location],
+           (router: Router, tcb: TestComponentBuilder, location: Location) => {
+             @Component({
+               template:
+                   '<router-outlet></router-outlet><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" >'
+             })
+             class RootCmpWithLink {
+             }
+
+             const f = tcb.createFakeAsync(RootCmpWithLink);
+             advance(f);
+
+             const link = f.debugElement.nativeElement.querySelector('a');
+             expect(link.className).toEqual('');
+
+             router.initialNavigation();
+             advance(f);
+
+             expect(link.className).toEqual('active');
+           })));
+
 
     it('should set the class on a parent element when the link is active',
        fakeAsync(inject(

modules/@angular/router/testing/router_testing_module.ts

@@ -7,8 +7,7 @@
  */
 
 import {Location, LocationStrategy} from '@angular/common';
-import {SpyLocation} from '@angular/common/testing';
-import {MockLocationStrategy} from '@angular/common/testing/mock_location_strategy';
+import {MockLocationStrategy, SpyLocation} from '@angular/common/testing';
 import {AppModule, AppModuleFactory, AppModuleFactoryLoader, Compiler, ComponentResolver, Injectable, Injector} from '@angular/core';
 
 import {Router, RouterOutletMap, Routes, UrlSerializer} from '../index';
@@ -16,6 +15,7 @@ import {ROUTES} from '../src/router_config_loader';
 import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '../src/router_module';
 
 
+
 /**
  * A spy for {@link AppModuleFactoryLoader} that allows tests to simulate the loading of app module
  * factories.

modules/@angular/router/tsconfig-es2015.json

@@ -10,6 +10,7 @@
     "paths": {
       "@angular/core": ["../../../dist/packages-dist/core"],
       "@angular/common": ["../../../dist/packages-dist/common"],
+      "@angular/common/testing": ["../../../dist/packages-dist/common/testing"],
       "@angular/compiler": ["../../../dist/packages-dist/compiler"],
       "@angular/platform-browser": ["../../../dist/packages-dist/platform-browser"],
       "@angular/platform-browser-dynamic": ["../../../dist/packages-dist/platform-browser-dynamic"]

modules/@angular/router/tsconfig-es5.json

@@ -10,6 +10,7 @@
     "paths": {
       "@angular/core": ["../../../dist/packages-dist/core"],
       "@angular/common": ["../../../dist/packages-dist/common"],
+      "@angular/common/testing": ["../../../dist/packages-dist/common/testing"],
       "@angular/compiler": ["../../../dist/packages-dist/compiler"],
       "@angular/platform-browser": ["../../../dist/packages-dist/platform-browser"],
       "@angular/platform-browser-dynamic": ["../../../dist/packages-dist/platform-browser-dynamic"]