Encountering a template parse error when using [routerlink] in an HTML page, despite importing RouterModule. Here's the relevant HTML snippet:
<mat-toolbar color="primary">
<h3 [style.color]="white">ADMIN PORTAL</h3>
<span class="spacer-left"></span>
<button mat-button *ngIf="islogged"> View Book Lists </button>
<a mat-button *ngIf="islogged" [routerlink]="['/addNewBook']"> Add a Book </a>
<button mat-button *ngIf="islogged" (click)="logout()"> Logout </button>
</mat-toolbar>
Note: The usage of Angular Material design is evident.
Below is the app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import 'hammerjs';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { LoginService } from './services/login.service';
import { AddNewBookComponent } from './components/add-new-book/add-new-book.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
AddNewBookComponent
],
imports: [
BrowserModule,
HttpModule,
routing,
BrowserAnimationsModule,
MaterialModule,
FormsModule,
],
providers: [LoginService],
bootstrap: [AppComponent]
})
export class AppModule { }
It should be noted that RouterModule was implicitly imported through the routing variable exported in a separate TypeScript file:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../app/components/login/login.component';
import { AddNewBookComponent } from '../app/components/add-new-book/add-new-book.component';
const appRoutes: Routes = [{
path: '',
redirectTo: '/login',
pathMatch: 'full'
}, {
path: 'login',
component: LoginComponent
},
{
path: 'addNewBook',
component: AddNewBookComponent
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Despite importing RouterModule in the above file, encountering a detailed browser error as shown below:
Uncaught Error: Template parse errors: Can't bind to 'routerlink'
since it isn't a known property of 'a'. ("> <button mat-button
*ngIf="islogged"> View Book Lists </button> <a mat-button *ngIf="islogged" [ERROR ->][routerlink]="['/addNewBook']"> Add a Book </a> <button mat-button *ngIf="islogged" (click)="logout"):
ng:///AppModule/NavbarComponent.html@4:33
...
Any assistance would be greatly appreciated. Thank you for your response in advance.