title: Angular 2 Jasmine Can't bind to 'routerLink' since it isn't a known property of 'a'
body: <p>I'm creating a unit test for my Navbar Component and I'm getting an error: </p>
  
  <blockquote>
    <p>Can't bind to 'routerLink' since it isn't a known property of 'a'</p>
  </blockquote>
  
  <p><strong>Navbar Component TS</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 Component Spec</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 { Router } from '@angular/router';
  
  export function main() {
      describe('Navbar component', () =&gt; {
  
          let de: DebugElement;
          let comp: NavComponent;
          let fixture: ComponentFixture&lt;NavComponent&gt;;
          let router: Router;
  
          // preparing module for testing
          beforeEach(async(() =&gt; {
              TestBed.configureTestingModule({
                  declarations: [NavComponent],
              }).compileComponents().then(() =&gt; {
  
                  fixture = TestBed.createComponent(NavComponent);
                  comp = fixture.componentInstance;
                  de = fixture.debugElement.query(By.css('p'));
  
              });
          }));
  
  
          it('should create component', () =&gt; expect(comp).toBeDefined());
  
  
  /*        it('should have expected &lt;p&gt; text', () =&gt; {
              fixture.detectChanges();
              const h1 = de.nativeElement;
              expect(h1.innerText).toMatch(" ");
          });*/
  
  
      });
  }
  </code></pre>
  
  <p>I realize that I need to add router as a spy, but if I add it as a SpyObj and declare it as a provider I get the same error. </p>
  
  <p>Is there a better way for me to add fix this error?</p>
  
  <p><strong>EDIT: Working Unit Test</strong></p>
  
  <p>Built this unit test based on the answer:</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 { 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 ],
                      }
                  })
  
                  .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');
  expect(links[2].linkParams).toBe('/upload', '3rd link should go to Upload');
                  expect(links[3].linkParams).toBe('/about', '4th link should to to About');
                  expect(links[4].linkParams).toBe('/login', '5th link should go to Logout');
              });
  
              it('can click Home link in template', () =&gt; {
                  const uploadLinkDe = linkDes[1];
                  const uploadLink = links[1];
  
                  expect(uploadLink.navigatedTo).toBeNull('link should not have navigated yet');
  
                  uploadLinkDe.triggerEventHandler('click', null);
                  fixture.detectChanges();
  
                  expect(uploadLink.navigatedTo).toBe('/');
              });
  
  
              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');
              });
  
              it('can click about link in template', () =&gt; {
                  const uploadLinkDe = linkDes[3];
                  const uploadLink = links[3];
  
                  expect(uploadLink.navigatedTo).toBeNull('link should not have navigated yet');
  
                  uploadLinkDe.triggerEventHandler('click', null);
                  fixture.detectChanges();
  
                  expect(uploadLink.navigatedTo).toBe('/about');
              });
  
              it('can click logout link in template', () =&gt; {
                  const uploadLinkDe = linkDes[4];
                  const uploadLink = links[4];
  
                  expect(uploadLink.navigatedTo).toBeNull('link should not have navigated yet');
  
                  uploadLinkDe.triggerEventHandler('click', null);
                  fixture.detectChanges();
  
                  expect(uploadLink.navigatedTo).toBe('/login');
              });
          }
  }
  </code></pre>