Настройка маршрутов: RouterModule.forRoot, forChild

1. Маршрутизация в Angular

Если бы Angular-приложение было книгой, то маршрутизация — это оглавление. Она позволяет пользователю "прыгать" между страницами приложения, не перезагружая браузер. Без роутинга ваше приложение — просто большой компонент, где всё намешано в одну кашу. С роутингом — это структурированный SPA, где есть чёткая навигация и порядок.

Примеры из жизни:

• Открываете /profile — видите профиль пользователя.
• Нажимаете на "О нас" — переходите на /about.
• Даже обновив страницу на /products/42, вы остаетесь на карточке товара №42.

В Angular маршрутизация реализована через специальный модуль — @angular/router. Он "следит" за адресной строкой браузера и решает, какой компонент нужно отобразить в зависимости от текущего URL.

Главные понятия:

• Маршрут (Route) — это правило, которое сопоставляет путь (например, /about) с компонентом (например, AboutComponent).
• Маршрутизатор (Router) — сервис, который управляет навигацией.
• Роутер-модуль (RouterModule) — модуль, который подключается в ваше приложение для поддержки роутинга.
• RouterOutlet — специальная "дырка" в шаблоне, куда Angular будет подставлять нужный компонент в зависимости от маршрута.

2. Настройка маршрутов: RouterModule.forRoot

Самый первый шаг — импортировать RouterModule и настроить корневые маршруты.

Пример минимального маршрута

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Главная страница
  { path: 'about', component: AboutComponent }, // /about
];

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

Как это работает?

• Массив routes определяет, какой компонент показывать для каждого пути.
• RouterModule.forRoot(routes) настраивает маршрутизацию для всего приложения.
• Экспортируем RouterModule, чтобы использовать роутинг в других модулях.
• Обычно этот модуль импортируется в главный модуль приложения (AppModule).

Подключаем роутинг в AppModule

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule // Подключаем наш роутинг!
  ],
  // ... остальные свойства
})
export class AppModule {}

Как работает RouterModule.forRoot

• forRoot используется только один раз — в корневом модуле (обычно это AppModule).
• Он регистрирует сервисы и провайдеры роутера глобально.
• Если вызвать forRoot дважды — Angular расстроится (и покажет ошибку).

Вставляем <router-outlet>

Чтобы Angular знал, куда вставлять компоненты при навигации, в шаблоне главного компонента (app.component.html) нужно добавить <router-outlet>:

<!-- app.component.html -->
<h1>Добро пожаловать!</h1>
<nav>
  <a routerLink="/">Главная</a>
  <a routerLink="/about">О нас</a>
</nav>
<router-outlet></router-outlet>

Пояснение:

• <router-outlet> — это "портал", через который Angular будет отображать компоненты в зависимости от маршрута.
• <a routerLink="..."> — директива, которая позволяет переходить по маршрутам без перезагрузки страницы.

3. forChild: маршруты в фиче-модулях

Когда ваше приложение разрастается, вы делите его на отдельные "фиче-модули" (feature modules), например, модуль пользователя, модуль админки и т.д. Для каждого такого модуля можно определить свои маршруты.

Пример: модуль пользователя

// user-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserProfileComponent } from './user-profile.component';
import { UserSettingsComponent } from './user-settings.component';

const routes: Routes = [
  { path: 'profile', component: UserProfileComponent },
  { path: 'settings', component: UserSettingsComponent }
];

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

• Здесь используется RouterModule.forChild(routes) — он не регистрирует глобальные сервисы, а просто добавляет маршруты для этого модуля.
• Такой модуль можно импортировать в свой фиче-модуль (UserModule).

В чём разница между forRoot и forChild?

• forRoot — только для корневого модуля, глобальные сервисы, глобальная конфигурация.
• forChild — для всех остальных модулей, просто добавляет маршруты, не трогая сервисы.

4. Полезные нюансы

Схема работы маршрутизации

flowchart TD
    A[AppModule] -->|RouterModule.forRoot| B[AppRoutingModule]
    B -->|routes| C[RouterOutlet]
    D[FeatureModule] -->|RouterModule.forChild| E[FeatureRoutingModule]
    E -->|feature routes| C

Вложенные маршруты

Допустим, у нас есть модуль "Пользователь" с вложенными страницами:

const routes: Routes = [
  {
    path: 'user',
    children: [
      { path: 'profile', component: UserProfileComponent },
      { path: 'settings', component: UserSettingsComponent }
    ]
  }
];

Пояснение:

• Теперь путь /user/profile отобразит компонент профиля пользователя.
• /user/settings — настройки пользователя.

5. Практика: добавляем роутинг в учебное приложение

Допустим, наше приложение — это "Мини-энциклопедия питомцев". У нас есть компоненты:

• PetListComponent — список животных
• PetDetailsComponent — подробная информация о питомце

Шаг 1: Определяем маршруты

const routes: Routes = [
  { path: '', component: PetListComponent }, // Главная — список питомцев
  { path: 'pet/:id', component: PetDetailsComponent } // Детальная страница питомца
];

:id — это параметр маршрута (динамическая часть URL).

Шаг 2: Настраиваем роутинг

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

Шаг 3: Используем routerLink

<!-- pet-list.component.html -->
<ul>
  <li *ngFor="let pet of pets">
    <a [routerLink]="['/pet', pet.id]">{{ pet.name }}</a>
  </li>
</ul>

Теперь при клике на питомца открывается страница с деталями, а URL меняется на /pet/42, где 42 — id питомца.

Шаг 4: Вставляем <router-outlet>

<!-- app.component.html -->
<h1>Энциклопедия питомцев</h1>
<router-outlet></router-outlet>

6. Типичные ошибки при настройке маршрутов

Ошибка №1: Использование forRoot в нескольких модулях.
forRoot должен быть только один раз — в корневом модуле приложения. Если подключить его ещё где-то, Angular устроит "революцию" и выдаст ошибку.

Ошибка №2: Забыли добавить <router-outlet>.
Если не вставить <router-outlet> в шаблон, ваши компоненты не будут отображаться при переходах по маршрутам. Пользователь будет смотреть на пустой экран и думать, что у вас всё сломалось.

Ошибка №3: Не экспортировали RouterModule в модуле роутинга.
Если забыли exports: [RouterModule] — директивы вроде routerLink и <router-outlet> не будут работать в шаблонах.

Ошибка №4: Не импортировали AppRoutingModule в AppModule.
Без этого роутинг просто не заработает.

Ошибка №5: Опечатки в путях и компонентах.
Если в маршруте указан несуществующий компонент или путь, Angular будет молчать, а страница не будет отображаться.

Ошибка №6: Использование абсолютного пути в routerLink без слэша.
[routerLink]="['/about']" — правильно, а [routerLink]="['about']" — будет относительный путь.