Unhandled Promise rejection: Cannot match any routes : <p>When I run this unit test:</p>

<pre><code>it('can click profile link in template', () =&gt; {
    const landingPageLinkDe = linkDes[0];
    const profileLinkDe = linkDes[1];
    const aboutLinkDe = linkDes[2];
    const findLinkDe = linkDes[3];
    const addLinkDe = linkDes[4];
    const registerLinkDe = linkDes[5];
    const landingPageLinkFull = links[0];
    const profileLinkFull = links[1];
    const aboutLinkFull = links[2];
    const findLinkFull = links[3];
    const addLinkFull = links[4];
    const registerLinkFull = links[5];

    navFixture.detectChanges();
    expect(profileLinkFull.navigatedTo)
        .toBeNull('link should not have navigated yet');
    profileLinkDe.triggerEventHandler('click', { button: 0 });
    landingPageLinkDe.triggerEventHandler('click', { button: 0 });
    aboutLinkDe.triggerEventHandler('click', { button: 0 });
    registerLinkDe.triggerEventHandler('click', { button: 0 });
    findLinkDe.triggerEventHandler('click', { button: 0 });
    addLinkDe.triggerEventHandler('click', { button: 0 });

    navFixture.detectChanges();
    expect(landingPageLinkFull.navigatedTo).toBe('/');
    expect(profileLinkFull.navigatedTo).toBe('/profile');
    expect(aboutLinkFull.navigatedTo).toBe('/about');
    expect(findLinkFull.navigatedTo).toBe('/find');
    expect(addLinkFull.navigatedTo).toBe('/add');
    expect(registerLinkFull.navigatedTo).toBe('/register');
});
</code></pre>

<p>I get this error:</p>

<blockquote>
  <p>zone.js:388 Unhandled Promise rejection: Cannot match any routes. URL
  Segment: 'add' ; Zone: ProxyZone ; Task: Promise.then ; Value: Error:
  Cannot match any routes. URL Segment: 'add'(…) Error: Cannot match any
  routes. URL Segment: 'add'</p>
</blockquote>

<p>The test still passes but it would be interesting to know why I'm getting the error. I don't get the error when I use the application as a user would. I've researched the error and it's usually due to not providing a default path in the routes, however I have done that. </p>

<p><strong>Am I doing something wrong to cause this error?</strong></p>

<p>navbar.component.spec.ts</p>

<pre><code>import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';

import {
    ComponentFixture,
    TestBed,
    async,
    fakeAsync
} from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import {
    DebugElement,
    Component,
    ViewChild,
    Pipe,
    PipeTransform,
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Router, RouterOutlet, RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { NavbarComponent } from './navbar.component';
import { RouterLinkStubDirective } from '../../router-stubs';
import { click } from '../../test/utilities.spec';

describe('NavbarComponent', () =&gt; {
    let navComponent: NavbarComponent;
    let navFixture: ComponentFixture&lt;NavbarComponent&gt;;
    let linkDes: any;
    let links: any;
    let landingPageLink: any;
    let profileLink: any;
    let aboutLink: any;
    let findLink: any;
    let addLink: any;
    let registerLink: any;

    beforeAll(() =&gt; {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,
            platformBrowserDynamicTesting());
    });

    beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
            declarations: [
                NavbarComponent,
                RouterLinkStubDirective
            ],
            imports: [RouterTestingModule],
            schemas: [NO_ERRORS_SCHEMA]
        }).compileComponents();
    }));

    beforeEach(() =&gt; {
        navFixture = TestBed.createComponent(NavbarComponent);
        navComponent = navFixture.componentInstance;
        navFixture.detectChanges();
        linkDes = navFixture.debugElement
            .queryAll(By.directive(RouterLinkStubDirective));
        links = linkDes
            .map((de: any) =&gt; de.injector
                .get(RouterLinkStubDirective) as RouterLinkStubDirective);
        landingPageLink = links[0].linkParams;
        profileLink = links[1].linkParams;
        aboutLink = links[2].linkParams;
        findLink = links[3].linkParams;
        addLink = links[4].linkParams;
        registerLink = links[5].linkParams;
    });

    it('can get RouterLinks from template', () =&gt; {
        expect(links.length).toBe(6, 'should have 6 links');
        expect(landingPageLink[0])
            .toEqual('/', '1st link should go to landing page');
        expect(profileLink[0])
            .toEqual('/profile', '2nd link should go to profile');
        expect(aboutLink[0])
            .toEqual('/about', '3rd link should go to about');
        expect(findLink[0])
            .toEqual('/find', '4th link should go to find');
        expect(addLink[0])
            .toEqual('/add', '5th link should go to add');
        expect(registerLink[0])
            .toEqual('/register', '6th link should go to register');
    });

    it('can click profile link in template', () =&gt; {
        const landingPageLinkDe = linkDes[0];
        const profileLinkDe = linkDes[1];
        const aboutLinkDe = linkDes[2];
        const findLinkDe = linkDes[3];
        const addLinkDe = linkDes[4];
        const registerLinkDe = linkDes[5];
        const landingPageLinkFull = links[0];
        const profileLinkFull = links[1];
        const aboutLinkFull = links[2];
        const findLinkFull = links[3];
        const addLinkFull = links[4];
        const registerLinkFull = links[5];

        navFixture.detectChanges();
        expect(profileLinkFull.navigatedTo)
            .toBeNull('link should not have navigated yet');
        profileLinkDe.triggerEventHandler('click', { button: 0 });
        landingPageLinkDe.triggerEventHandler('click', { button: 0 });
        aboutLinkDe.triggerEventHandler('click', { button: 0 });
        registerLinkDe.triggerEventHandler('click', { button: 0 });
        findLinkDe.triggerEventHandler('click', { button: 0 });
        addLinkDe.triggerEventHandler('click', { button: 0 });

        navFixture.detectChanges();
        expect(landingPageLinkFull.navigatedTo).toBe('/');
        expect(profileLinkFull.navigatedTo).toBe('/profile');
        expect(aboutLinkFull.navigatedTo).toBe('/about');
        expect(findLinkFull.navigatedTo).toBe('/find');
        expect(addLinkFull.navigatedTo).toBe('/add');
        expect(registerLinkFull.navigatedTo).toBe('/register');
    });
});
</code></pre>

<p>stub for test:</p>

<pre><code>import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';

import {
   EventEmitter,
   Output,
   trigger,
   state,
   style,
   transition,
   animate,
   Directive,
   Input
} from '@angular/core';

import {
   ComponentFixture,
   TestBed,
   async,
   fakeAsync
} from '@angular/core/testing';
import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import {
   DebugElement,
   Component,
   ViewChild,
   Pipe,
   PipeTransform
} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import { NavbarComponent } from './shared/subcomponents/navbar.component';
import { AppComponent } from './app.component';
import { click } from './test/utilities.spec';

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

@Directive({
  selector: '[routerLink]',
  host: {
    '(click)': 'onClick()'
  }
})
export class RouterLinkStubDirective {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  onClick() {
    this.navigatedTo = this.linkParams[0];
  }
}
</code></pre>

<p>app.routes.ts:</p>

<pre><code>import { Routes }  from '@angular/router';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { FindPageComponent } from './find-page/find-page.component';
import { AddPageComponent } from './add-page/add-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { AboutPageComponent } from './about-page/about-page.component';
import { ProfilePageComponent } from './profile-page/profile-page.component';

export const routerConfig: Routes = [
  {
    path: '',
    component: LandingPageComponent
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  },
  {
    path: 'find',
    component: FindPageComponent
  },
  {
    path: 'add',
    component: AddPageComponent
  },
    {
    path: 'register',
    component: RegisterPageComponent
  },
    {
    path: 'about',
    component: AboutPageComponent
  },
    {
    path: 'profile',
    component: ProfilePageComponent
  }
];
</code></pre>

<p>navbar.component.html:</p>

<pre><code>&lt;nav class="navbar navbar-dark navbar-fixed-top text-uppercase"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;button     class="navbar-toggler hidden-md-up pull-xs-right" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#nav-content"&gt;
                    &amp;#9776;
        &lt;/button&gt;
        &lt;a class="navbar-brand" [routerLink]="['/']" 
        routerLinkActive="active"&gt;vepo&lt;/a&gt;
        &lt;div class="collapse navbar-toggleable-sm" id="nav-content"&gt;
            &lt;ul class="nav navbar-nav pull-xs-right"&gt;
                 &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/profile']" 
                    routerLinkActive="active"&gt;profile&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/about']" 
                    routerLinkActive="active"&gt;about&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/find']" 
                    routerLinkActive="active"&gt;find&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" [routerLink]="['/add']" 
                    routerLinkActive="active"&gt;add&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;button type="button" class="as-text nav-link 
                    text-uppercase" (click)="openModal()"&gt;
                        login
                    &lt;/button&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link signup" [routerLink]="['/register']" 
                    routerLinkActive="active"&gt;sign up free&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;
&lt;login #modal&gt;&lt;/login&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>
