# Настройка базового роутинга в Angular

Давайте теперь настроим роутинг. Сделаем так, чтобы если в адресной строке браузера вбит URL `/aaaa/`, то показывался первый компонент, а если вбит `/bbbb/`, то второй.

Такая настройка делается в файле `app.routes.ts`. Для начала нужно импортировать наши компоненты:

`import { AaaaComponent } from './aaaa/aaaa.component'; import { BbbbComponent } from './bbbb/bbbb.component';`

А теперь нужно сказать, какой URL какому компоненту соответствует. Для этого нужно сделать специальный массив объектов в маршрутами (роутами). В каждом объекте будет ключ `path`, в котором задается URL (без концевых слешей), и ключ `component`, в котором задается компонент, который показывается по этому URL:

`export const routes: Routes = [ { path: 'aaaa', component: AaaaComponent }, { path: 'bbbb', component: BbbbComponent }, ];`

Настройки роутинга, однако, недостаточно. Нужно в родительском компоненте указать место, в которое будут выводиться наши компоненты. Этим мы займемся в следующем уроке.

Настройте роутинг в файле `app.routes.ts`.

← →
↑