title: Unhandled Promise rejection: Cannot match any routes
body: <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>