title: Testing with Karma- Can't bind to 'routerLink' since it isn't a known property of
body: <p>I am new to testing with Karma/Jasmine in my Angular 6 app and could use some help with one of my most common failures. </p>
  
  <p>It's the use and configuration of 'RouterLink' in my template. I have no error running the app, but upon running tests, I receive the error:</p>
  
  <pre><code>Can't bind to 'routerLink' since it isn't a known property of 'a'.
  </code></pre>
  
  <p>I can't quite configure my spec file correctly. Any thoughts on how I can fix my configurations to fix that error when I run my tests? I'm not sure if it's an issue with my app.module file, my component, or test file. </p>
  
  <pre><code>import { NavigationComponent } from '../navigation/navigation.component';
  import { EditMonitoringPointComponent } from './edit-monitoring-point.component';
  import { FormsModule, NgModel } from '@angular/forms';
  import { RouterLink, RouterModule } from '@angular/router';
  import { NgModule } from '@angular/core';
  
  describe('EditMonitoringPointComponent', () =&gt; {
    let component: EditMonitoringPointComponent;
    let fixture: ComponentFixture&lt;EditMonitoringPointComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [ FormsModule],
        declarations: [ EditMonitoringPointComponent, NavigationComponent],
        providers: [ RouterModule, RouterLink],
        // directives: [ROUTER_DIRECTIVES]
  
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(EditMonitoringPointComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>This is the line in the html that it's catching:</p>
  
  <p><code>&lt;a [routerLink]="['/sites', current_mp.siteId]" &gt;&lt;i class='fa fa-ban'&gt;&lt;/i&gt; Cancel&lt;/a&gt;</code></p>
  
  <p>My component looks like:</p>
  
  <pre><code>import { ActivatedRoute, ParamMap, Router, RouterModule, RouterLink } from '@angular/router';
  import { SiteService } from '../../services/site.service'
  import { MonitoringPointService } from '../../services/monitoring-point.service'
  import { AuthService } from '../../services/auth.service'
  import { DeviceService } from '../../services/device.service';
  import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  
  @Component({
    selector: 'app-edit-monitoring-point',
    templateUrl: './edit-monitoring-point.component.html',
    styleUrls: ['./edit-monitoring-point.component.css']
  })
  
  export class EditMonitoringPointComponent implements OnInit {
  //declare variables
  }
  
  constructor(private router: Router, private monitoringPointService: MonitoringPointService, public dialog: MatDialog, private deviceService: DeviceService, public siteService: SiteService, private route: ActivatedRoute, private SiteService: SiteService, private authService: AuthService) { }
  
  ngOnInit() {
  ...
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { 
  RouterModule}  from '@angular/router';
  import { AppRoutingModule, routingComponents } from './app-routing.module';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      routingComponents],
    imports: [
      RouterModule,
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      HttpClientModule,],
    providers: [
        {provide: HTTP_INTERCEPTORS,
        useClass: UnauthorizedResponseInterceptor,
        multi: true}]
  })
  export class AppModule { }
  platformBrowserDynamic().bootstrapModule(AppModule);
  
  Thank you so much!
  
  </code></pre>