Ошибка "Can't bind to 'routerLink' since it isn't a known property" в Angular

Причина ошибки

Ошибка возникает потому, что директива routerLink является частью модуля RouterModule из пакета @angular/router. В вашем AppModule вы импортировали только BrowserModule, но не импортировали RouterModule, поэтому Angular не знает о существовании директивы routerLink.

Решение: импорт RouterModule

Вам нужно добавить импорт RouterModule в массив imports вашего модуля. Если вы только начинаете работу с роутингом, рекомендую использовать метод RouterModule.forRoot(), который принимает массив маршрутов (routes) и настраивает корневой роутер приложения.

Вот исправленный код app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; // Импортируем RouterModule и Routes
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

// Определяем маршруты
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // Добавляем RouterModule в imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Дополнительные важные моменты:

• RouterModule.forRoot() vs forChild(): Используйте forRoot() только в корневом модуле приложения (обычно AppModule). Для дочерних модулей используйте RouterModule.forChild().
• Порядок импорта: Убедитесь, что RouterModule находится в массиве imports. Если вы импортировали его, но забыли добавить в массив, ошибка сохранится.
• Создание компонентов для маршрутов: Не забудьте создать компоненты (HomeComponent, AboutComponent, ContactComponent), на которые ссылаются маршруты. Если вы ещё не создали их, Angular выдаст ошибку при компиляции.
• Динамические ссылки: Если вам нужно передать параметры в маршрут, используйте синтаксис [routerLink]="['/user', userId]" или routerLink="/user/{{userId}}".

Проверка работоспособности

После внесения изменений перезапустите сервер разработки (ng serve). Теперь ссылки должны работать, и ошибка исчезнет. Если ошибка осталась, проверьте:

• Установлен ли пакет @angular/router в вашем проекте (обычно он идёт в комплекте с Angular CLI, но проверьте package.json).
• Нет ли опечаток в названиях компонентов или путей.
• Не используете ли вы routerLink в компоненте, который не объявлен в модуле с импортированным RouterModule.

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

@Component({
  selector: 'app-header',
  template: `
    <nav>
      <button (click)="navigateToHome()">Главная</button>
      <button (click)="navigateToAbout()">О нас</button>
    </nav>
  `
})
export class HeaderComponent {
  constructor(private router: Router) {}

  navigateToHome(): void {
    this.router.navigate(['/home']);
  }

  navigateToAbout(): void {
    this.router.navigate(['/about']);
  }
}