Angular событие щелчка в элементе div не работает

Question

Я просто хочу протестировать событие щелчка в элементе div, и оно не работает

Вот часть кода в html и ts файлах:

HTML:

<div class="col-md-3 mx-auto d-flex flex-row justify-content-center align-items-center" 
                style="height: 200px; background-color: rgba(100, 100, 179, 0.1); position: relative;"
                (click)="goToInvoices()"
            >
                <h2>Invoices</h2>
            </div>

TS:

// i've tried to add also :any for return type
goToInvoices() {
  this.router.navigate(['/invoices']).then(nav => {
      console.log(nav); // true if navigation is successful
  }, err => {
     console.log(err) // when there's an error
  });
}

В консоли nav имеет значение null !!!

app. module.ts:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', redirectTo: 'home', pathMatch: 'full'},
  {path: 'invoices', component: InvoicesComponent},
];

Angular версия: 9.1.7

Answer 1

Вам не хватает router-outlet

Проверьте следующее

https://stackblitz.com/edit/angular-ivy-6g2tky

Answer 2

В вашем app.component. html добавьте это:

<router-outlet></router-outlet>