Angular 2 Jasmine failing undefined is not an object
<p>I'm writing a unit test for my NavBar Component in Angular 2. I have the router mocked and it passes all of my tests; however, I created a service to set the active class for a route and it's causing my unit test to fail with the error:</p>

<blockquote>
  <p>undefined is not an object (evaluating 'this.router.url.substring')</p>
</blockquote>

<p><strong>NavActive Service</strong></p>

<pre><code>import { Injectable } from '@angular/core';
import { Router, RouterModule } from '@angular/router';

@Injectable()
export class NavActiveService {
    constructor(private router: Router) {

    }

    homeActive() {
        if (this.router.url === '/') {
            return '#0fecdb';
        }
        else {
            return '#00f';
        }
    }

    loginActive() {
        if (this.router.url.substring(0,6) === '/login') {
            return '#0fecdb';
        }
        else {
            return '#00f';
        }
    }

    uploadActive() {
        if (this.router.url.substring(0,7) === '/upload') {
            return '#0fecdb';
        }
        else {
            return '#00f';
        }
    }

    aboutActive() {
        if (this.router.url.substring(0,5) === '/about') {
            return '#0fecdb';
        }
        else {
            return '#00f';
        }
    }

    contactActive() {
        if (this.router.url.substring(0,7) === '/contact') {
            return '#0fecdb';
        }
        else {
            return '#00f';
        }
    }

    four04Active() {
        if (this.router.url === '/**') {
            return '#0fecdb';
        }
        else {
            return '#00f';
        }
    }
}
</code></pre>

<p><strong>Navbar Component</strong></p>

<pre><code>import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NavActiveService } from '../../../services/navactive.service';
import { GlobalEventsManager } from '../../../services/GlobalEventsManager';

@Component({
  moduleId: module.id,
  selector: 'my-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls:['navbar.component.css'],
  providers: [NavActiveService]
})
export class NavComponent {
  showNavBar: boolean = true;

  constructor(private router: Router,
              private navactiveservice:NavActiveService,
              private globalEventsManager: GlobalEventsManager){

    this.globalEventsManager.showNavBar.subscribe((mode:boolean)=&gt;{
      this.showNavBar = mode;
    });

  }

}
</code></pre>

<p><strong>Navbar HTML</strong></p>

<pre><code>&lt;div *ngIf="showNavBar"&gt;
&lt;nav class="navbar navbar-fixed-top navbar-light bg-faded"&gt;
  &lt;button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar"&gt;
    &amp;#9776;
  &lt;/button&gt;
  &lt;div class="collapse navbar-toggleable-xs" id="navbar"&gt;
  &lt;div class="container"&gt;
    &lt;a class="navbar-brand" [routerLink]="'/'"&gt;My App&lt;/a&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="nav-item" &gt;
        &lt;a class="nav-link"  [routerLink]="'/'" [style.backgroundColor]="this.navactiveservice.homeActive()"  &gt; &lt;i class="fa fa-home"&gt;&lt;/i&gt; Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item" &gt;
        &lt;a class="nav-link"  [routerLink]="'/upload'" [style.backgroundColor]="this.navactiveservice.uploadActive()" &gt; &lt;i class="fa fa-upload"&gt;&lt;/i&gt; Upload &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item" &gt;
        &lt;a class="nav-link" [routerLink]="'/about'" [style.backgroundColor]="this.navactiveservice.aboutActive()" &gt; &lt;i class="fa fa-bar-chart"&gt; &lt;/i&gt; Tracking Data&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item" &gt;
        &lt;a class="nav-link" [routerLink]="'/login'" [style.backgroundColor]="this.navactiveservice.loginActive()"  &gt; &lt;i class="fa fa-user"&gt;&lt;/i&gt; Logout&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Navbar Unit Test</strong></p>

<pre><code>import { ComponentFixture, TestBed, async  } from '@angular/core/testing';
import { NavComponent } from './navbar.component';
import { DebugElement }    from '@angular/core';
import { By }              from '@angular/platform-browser';
import { RouterLinkStubDirective, RouterOutletStubComponent } from '../../../../test/router-stubs';
import { Router } from '@angular/router';
import { GlobalEventsManager } from '../../../services/GlobalEventsManager';
import { NavActiveService } from '../../../services/navactive.service';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../shared.module';


export function main() {
    let comp: NavComponent;
    let fixture: ComponentFixture&lt;NavComponent&gt;;
    let mockRouter:any;
    class MockRouter {
        //noinspection TypeScriptUnresolvedFunction
        navigate = jasmine.createSpy('navigate');
    }

    describe('Navbar Componenet', () =&gt; {

        beforeEach( async(() =&gt; {
            mockRouter = new MockRouter();
            TestBed.configureTestingModule({
                imports: [ SharedModule ]
            })

            // Get rid of app's Router configuration otherwise many failures.
            // Doing so removes Router declarations; add the Router stubs
                .overrideModule(SharedModule, {
                    remove: {
                        imports: [ RouterModule ],

                    },
                    add: {
                        declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ],
                        providers: [ { provide: Router, useValue: mockRouter }, GlobalEventsManager, NavActiveService  ],
                    }
                })

                .compileComponents()

                .then(() =&gt; {
                    fixture = TestBed.createComponent(NavComponent);
                    comp    = fixture.componentInstance;
                });
        }));

        tests();
    });


        function tests() {
            let links: RouterLinkStubDirective[];
            let linkDes: DebugElement[];

            beforeEach(() =&gt; {
                // trigger initial data binding
                fixture.detectChanges();

                // find DebugElements with an attached RouterLinkStubDirective
                linkDes = fixture.debugElement
                    .queryAll(By.directive(RouterLinkStubDirective));

                // get the attached link directive instances using the DebugElement injectors
                links = linkDes
                    .map(de =&gt; de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
            });

            it('can instantiate it', () =&gt; {
                expect(comp).not.toBeNull();
            });

            it('can get RouterLinks from template', () =&gt; {
                expect(links.length).toBe(5, 'should have 5 links');
                expect(links[0].linkParams).toBe( '/', '1st link should go to Home');
                expect(links[1].linkParams).toBe('/', '2nd link should go to Home');
            });

            it('can click upload link in template', () =&gt; {
                const uploadLinkDe = linkDes[2];
                const uploadLink = links[2];

                expect(uploadLink.navigatedTo).toBeNull('link should not have navigated yet');

                uploadLinkDe.triggerEventHandler('click', null);
                fixture.detectChanges();

                expect(uploadLink.navigatedTo).toBe('/upload');
            });
        }
}
</code></pre>

<p>How could I mock the navActiveService so that my tests pass successfully?</p>