Как я могу перенаправить на другую страницу, используя Angular Маршрутизация?

Question

Мне не удается найти нужную страницу c.

Мое назначение ./book-list.component.html, управляемое декоратором компонентов ниже:

---

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

---

Я запускаю событие из goToBookList () home.component. html ниже:

<div class="activities btn-group-vertical">
    <a  class="btn btn-primary travels" href="#" role="button">Travels</a>
    <a class="btn btn-primary books" role="button" (click)="goToBookList()">Books</a>
    <a class="btn btn-primary restaurants" href="#" role="button">Restaurants</a>
    <a class="btn btn-primary movies" href="#" role="button">Movies</a>
</div>

---

Я реализовал метод дома. контроллер component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  constructor(private router : Router) { }

  ngOnInit(): void {
  }

  goToBookList() : void {
    this.router.navigate(['/book-list']);
  }

}

---

Я зарегистрировал маршрут в своем app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BookListComponent } from './themes/lists/book-list/book-list.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'book-list', component: BookListComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

---

Я импортировал модуль AppRouting в app.module:

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule,
    MessageModule,
    HttpClientModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    MessageComponent, 
    LoginComponent,
    BookListComponent

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Важно отметить, что я попытался выполнить маршрутизацию с помощью местозаполнителя маршрутизатора и директивы router-link, и он отлично работает:

<div class="activities btn-group-vertical">
    <a  class="btn btn-primary travels" href="#" role="button">Travels</a>
    <a class="btn btn-primary books" role="button" [routerLink]="['/book-list']">Books</a>
    <a class="btn btn-primary restaurants" href="#" role="button">Restaurants</a>
    <a class="btn btn-primary movies" href="#" role="button">Movies</a>
</div>

<router-outlet></router-outlet>

Похоже, что контроллер home.component.ts не работает нормально.

  goToBookList() : void {
    this.router.navigate(['/book-list']);
  }

Есть идеи?

Это мой первый пост здесь, я надеюсь, что пост понятен и лаконичен; Не стесняйтесь оставлять отзывы!

Спасибо за ваше время:)