title: Angular 7 and can't bind to 'routerlink' since it isn't a known property of 'a'
body: <p>I am creating a new Angular 7 app and I have been researching this problem for the last few days, but I unable to find a solution to this error:</p>
  <blockquote>
  <p>can't bind to 'routerlink' since it isn't a known property of 'a'</p>
  </blockquote>
  <p>Here are some of the articles I have looked at <a href="https://stackoverflow.com/questions/34317044/angular2-exception-cant-bind-to-routerlink-since-it-isnt-a-known-native-pro">Angular2 Exception: Can&#39;t bind to &#39;routerLink&#39; since it isn&#39;t a known native property</a> and <a href="https://stackoverflow.com/questions/47168952/getting-cant-bind-to-routerlink-since-it-isnt-a-known-property-of-a-error">Getting Can&#39;t bind to &#39;routerLink&#39; since it isn&#39;t a known property of &#39;a&#39;. error in spite of referencing router moudule</a> but &quot;no-go&quot;.</p>
  <p>Here is the layout:</p>
  <p>app -&gt; navigation
  Here is the code:</p>
  <p>app.module.ts</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { UltiMaterialModule } from './ulti-material/ulti-material.module';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { HttpClientModule } from '@angular/common/http';
  import { LayoutModule } from '@angular/cdk/layout';
  import { NavigationModule } from './navigation/navigation.module';
  import { AppRoutingModule } from './app-routing.module';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      RouterModule,
      AppRoutingModule,
      BrowserModule,
      BrowserAnimationsModule,
      LayoutModule,
      HttpClientModule,
      UltiMaterialModule, // ulti-nav/ulti-nav.component.ts
      NavigationModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>app-routing.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  export const AppRoutes: Routes = [
    { path: '**',  loadChildren: './navigation/navigation.module#NavigationModule', pathMatch: 'full' }
  ];
  
  @NgModule({
    imports: [ RouterModule.forRoot(AppRoutes) ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {}
  </code></pre>
  <p>app.component.html</p>
  <pre><code>&lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;app-navigation&gt;&lt;/app-navigation&gt;
  </code></pre>
  <p>navigation/navigation.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { RouterModule, RouterLink } from '@angular/router';
  
  import { BrowserModule } from '@angular/platform-browser';
  
  import { UltiMaterialModule } from '../ulti-material/ulti-material.module';
  
  import { VendorsComponent } from '../vendors/vendors.component';
  import { DashboardComponent } from '../dashboard/dashboard.component';
  import { UserPanelComponent } from '../user-panel/user-panel.component';
  import { QuestionnaireComponent } from '../questionnaire/questionnaire.component';
  import { NavigationComponent } from './navigation.component';
  
  import { NavigationRoutingModule } from './navigation-routing.module';
  
  
  @NgModule({
    declarations: [
      VendorsComponent,
      DashboardComponent,
      UserPanelComponent,
      QuestionnaireComponent,
      NavigationComponent
    ],
    imports: [
      RouterModule,
      BrowserModule,
      CommonModule,
      UltiMaterialModule,
      NavigationRoutingModule
    ],
    exports: [
      NavigationComponent,
      RouterModule
    ]
  })
  export class NavigationModule {}
  </code></pre>
  <p>navigation/navigation-router.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { VendorsComponent } from '../vendors/vendors.component';
  import { DashboardComponent } from '../dashboard/dashboard.component';
  
  export const NavigationRoutes: Routes = [
    { path: 'home', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'vendors', component: VendorsComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
  ];
  
  @NgModule({
    imports: [ RouterModule.forChild(NavigationRoutes) ],
    exports: [ RouterModule ]
  })
  export class NavigationRoutingModule {}
  </code></pre>
  <p>navigation/navigation.component.ts</p>
  <pre><code>import { Component } from '@angular/core';
  import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
  import {
    Router,
    Event as RouterEvent,
    NavigationStart,
    NavigationEnd,
    NavigationCancel,
    NavigationError
  } from '@angular/router';
  import { ActivatedRoute } from '@angular/router';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Component({
    selector: 'app-navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.scss']
  })
  export class NavigationComponent {
  
    // Native Template fails on Button mat-icon render with always false. Had to reconstruct based on:
    // https://stackoverflow.com/questions/50525676/angular-6-material-nav-component-template-parse-errors-unexpected-token?rq=1
    /*
    isHandset$: Observable&lt;boolean&gt; = this.breakpointObserver.observe(Breakpoints.Handset)
      .pipe(
        map(result =&gt; result.matches)
      );
    */
  
    isHandset$: Observable&lt;BreakpointState&gt; = this.breakpointObserver.observe(Breakpoints.Handset);
  
    _loading = true;
    public get showLoadingIndicator() {
      return this._loading;
    }
    public set showLoadingIndicator(value) {
      this._loading = value;
    }
  
    constructor(private breakpointObserver: BreakpointObserver,
      private router: Router,
      private route: ActivatedRoute
      ) {
  
      router.events.subscribe((event: RouterEvent) =&gt; {
        this.navigationInterceptor(event);
      });
    }
  
    // Shows and hides the loading spinner during RouterEvent changes
    navigationInterceptor(event: RouterEvent): void {
      if (event instanceof NavigationStart) {
        this._loading = true;
      }
      if (event instanceof NavigationEnd) {
        this._loading = false;
      }
  
      // Set loading state to false in both of the below events to hide the spinner in case a request fails
      if (event instanceof NavigationCancel) {
        this._loading = false;
      }
      if (event instanceof NavigationError) {
        this._loading = false;
      }
    }
  }
  </code></pre>
  <p>navigation.component.html</p>
  <pre><code>&lt;div *ngIf=&quot;showLoadingIndicator&quot; class=&quot;loading-indicator&quot;&gt;&lt;mat-spinner&gt;&lt;/mat-spinner&gt;&lt;/div&gt;
  &lt;mat-toolbar color=&quot;primary&quot;&gt;
      &lt;button 
        type=&quot;button&quot;
        aria-label=&quot;Toggle sidenav&quot;
        mat-icon-button
        (click)=&quot;drawer.toggle()&quot;
        *ngIf=&quot;isHandset$ | async&quot;&gt;
        &lt;mat-icon aria-label=&quot;Side nav toggle icon&quot;&gt;menu&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;span&gt;&lt;mat-icon class=&quot;logo&quot; svgIcon=&quot;logo2&quot;&gt;&lt;/mat-icon&gt;&lt;/span&gt;
      &lt;span class=&quot;span-fill-remaining-space&quot;&gt;&lt;/span&gt;
      &lt;span&gt;Global Security Research Project System&lt;/span&gt;
      &lt;button 
        type=&quot;button&quot;
        aria-label=&quot;Toggle sidenav&quot;
        mat-icon-button
        (click)=&quot;user.toggle()&quot;
        *ngIf=&quot;isHandset$ | async&quot;&gt;
        &lt;mat-icon aria-label=&quot;Side nav toggle icon&quot;&gt;account_circle&lt;/mat-icon&gt;
      &lt;/button&gt;
  &lt;/mat-toolbar&gt;
  &lt;mat-sidenav-container class=&quot;sidenav-container&quot;&gt;
    &lt;mat-sidenav
      #drawer
      class=&quot;sidenav&quot;
      fixedInViewport=&quot;false&quot;
      fixedTopGap=&quot;64&quot;
      [attr.role]=&quot;(isHandset$ | async) ? 'dialog' : 'navigation'&quot;
      [mode]=&quot;(isHandset$ | async) ? 'over' : 'side'&quot;
      [opened]=&quot;!(isHandset$ | async)&quot;&gt;
      &lt;mat-nav-list&gt;
        &lt;a mat-list-item &gt;
          &lt;mat-icon class=&quot;icon&quot;&gt;home&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Home&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item &gt;
          &lt;mat-icon class=&quot;developer_board&quot;&gt;developer_board&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Project&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item &gt;
          &lt;mat-icon class=&quot;how_to_reg&quot;&gt;how_to_reg&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Products&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item&gt;
          &lt;mat-icon class=&quot;people&quot;&gt;people&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Teams&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item [routerlink]=&quot;['/vendors']&quot; routerLinkActive&gt;
          &lt;mat-icon class=&quot;store&quot;&gt;store&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Vendors&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item&gt;
          &lt;mat-icon class=&quot;dashboard&quot;&gt;dashboard&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Dashboard&lt;/span&gt;
        &lt;/a&gt;
        &lt;a mat-list-item&gt;
          &lt;mat-icon class=&quot;question_answer&quot;&gt;question_answer&lt;/mat-icon&gt;
          &lt;span class=&quot;label&quot;&gt;Questionnaire&lt;/span&gt;
        &lt;/a&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav 
      #user
      position=&quot;end&quot;&gt;
      &lt;app-user-panel&gt;&lt;/app-user-panel&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;div class=&quot;material-page-spacing&quot;&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  <p>package.json - dependencies</p>
  <pre><code>&quot;@angular/animations&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/cdk&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/common&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/compiler&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/core&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/forms&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/http&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/material&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/platform-browser&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/platform-browser-dynamic&quot;: &quot;^7.0.2&quot;,
  &quot;@angular/router&quot;: &quot;^7.0.2&quot;,
  &quot;angular-oauth2-oidc&quot;: &quot;^5.0.2&quot;,
  &quot;core-js&quot;: &quot;^2.5.4&quot;,
  &quot;material-design-icons&quot;: &quot;^3.0.1&quot;,
  &quot;rxjs&quot;: &quot;~6.3.3&quot;,
  &quot;speed-measure-webpack-plugin&quot;: &quot;^1.2.3&quot;,
  &quot;zone.js&quot;: &quot;~0.8.26&quot;
  </code></pre>
  <p>I am at a loss on what the problem is. I have the proper imports and exports from what I can tell. If you see something that I cannot please feel free to comment.</p>
  <p>If you need more information, such as more code, also please let me know.</p>