Кнопка маршрутизации не работает в Angular 2

Я пытаюсь импортировать функциональность, чтобы добавить новую книгу с помощью кнопки на панели навигации. Случается, что когда я нажимаю кнопку, я вижу изменение url на localhost:4200/addNewBook всего за микросекунду, а затем возвращается к localhost:4200.

Я также пробовал функции маршрутизации, но я не знаю, почему это не работает. Если я вручную набираю адрес, он открывает страницу, но я хочу, чтобы она работала после нажатия кнопки. Я тоже создал класс, называемый книгой.

При использовании отладчика браузера возникают следующие ошибки во время выполнения:

Вот фрагменты моего кода:

Add-new-book-component.ts:

import { Component, OnInit } from '@angular/core';
import { Book } from '../../models/book';

@Component({
  selector: 'app-add-new-book',
  templateUrl: './add-new-book.component.html',
  styleUrls: ['./add-new-book.component.css']
})
export class AddNewBookComponent implements OnInit {

  private newBook: Book = new Book();
  private bookAdded: boolean;   

  constructor() { }

  ngOnInit() {
  }

}

Add-new-book-component.html:

<div class="container">
    <div [hidden]="bookAdded">
        <h3 style="margin-top: 30px;">New Book Information <span style="font-size:small">* is a required field</span></h3>

        <form (ngSubmit)="onSubmit()">
            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="4" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="title" type="text" required [(ngModel)]="newBook.title" name="title" placeholder="Title">
                    </md-input-container>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="author" type="text" required [(ngModel)]="newBook.author" name="author" placeholder="Author">
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="publisher" type="text" required [(ngModel)]="newBook.publisher" name="publisher" placeholder="Publisher">
                    </md-input-container>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="4" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="publicationDate" type="date" required [(ngModel)]="newBook.publicationDate" name="publicationDate" placeholder="PublicationDate">
                    </md-input-container>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-select placeholder="Category" id="category" name="category" [(ngModel)]="newBook.category">
                        <md-option value="Management">Management</md-option>
                        <md-option value="Fiction">Fiction</md-option>
                        <md-option value="Engineering">Engineering</md-option>
                        <md-option value="Programming">Programming</md-option>
                        <md-option value="Arts &amp; Literature">Arts &amp; Literature</md-option>
                    </md-select>
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-select placeholder="Format" id="format" name="format" [(ngModel)]="newBook.format">
                        <md-option value="paperback">Paperback</md-option>
                        <md-option value="hardcover">Hardcover</md-option>
                    </md-select>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="pageNumber" type="number" [(ngModel)]="newBook.numberOfPages" name="numberOfPages" step="1" placeholder="Number of Pages">
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="isbn" type="text" required [(ngModel)]="newBook.isbn" name="isbn" placeholder="ISBN">
                    </md-input-container>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="listPrice" type="number" [(ngModel)]="newBook.listPrice" name="listPrice" step="0.01" placeholder="List Price">
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="ourPrice" type="number" [(ngModel)]="newBook.ourPrice" name="ourPrice" step="0.01" placeholder="Our Price">
                    </md-input-container>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="shippingWeight" type="number" [(ngModel)]="newBook.shippingWeight" name="shippingWeight" step="0.01" placeholder="Shipping Weight">
                    </md-input-container>&nbsp;ounces&nbsp;
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-select placeholder="Language" id="language" name="language" [(ngModel)]="newBook.language">
                        <md-option value="english">English</md-option>
                        <md-option value="spanish">Spanish</md-option>
                    </md-select>
                </md-grid-tile>
            </md-grid-list>

            <md-grid-list cols="4" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <md-input-container>
                        <input mdInput id="inStockNumber" type="number" [(ngModel)]="newBook.inStockNumber" name="inStockNumber" step="0.01" placeholder="Numbers In Stock">
                    </md-input-container>
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    &nbsp;
                    <md-slide-toggle [color]="color" [checked]="checked" [disabled]="disabled" [(ngModel)]="newBook.active" name="active">Active</md-slide-toggle>
                </md-grid-tile>
            </md-grid-list>

            <md-input-container>
                <textarea mdInput id="description" [(ngModel)]="newBook.description" name="description" placeholder="Description" required></textarea>
            </md-input-container>
            Image &nbsp;
            <input id="tile" type="file" id="bookImage" name="bookImage" (change)="uploadImageService.fileChangeEvent($event)">
            <br><br>

            <md-grid-list cols="20" rowHeight="60px">
                <md-grid-tile [colspan]="2" [rowspan]="1">
                        <button class="mat-primary" md-raised-button type="submit">Add Book</button>
                </md-grid-tile>
                <md-grid-tile [colspan]="2" [rowspan]="1">
                    <a class="mat-warn" md-raised-button routerLink="/">Cancel</a>
                </md-grid-tile>
            </md-grid-list>
        </form>
    </div>
    <div class="row" [hidden]="!bookAdded"
    >
        <h3>Book added successfully!</h3>
    </div>
</div>

Nav-bar-component.html:

<md-toolbar class="mat-primary">
    <h3 [style.color]="'white'">ADMIN PORTAL</h3>
    <span class="example-spacer"></span>
    <span [hidden]="!loggedIn"><a md-button>View Book List</a></span>
    <span [hidden]="!loggedIn"><a md-button routerLink="/addNewBook">Add a Book</a></span>
    <span [hidden]="!loggedIn"><a md-button (click)="logout()">Logout</a></span>
</md-toolbar>

App.routing.ts:

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LoginComponent} from './components/login/login.component';
import {AddNewBookComponent} from './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);