Defining Routes and RouterOutlet

The Angular router needs three things: a list of routes (which URL maps to which component), a provider that registers the router, and a <router-outlet> element that marks where page components are rendered.

Defining routes

Routes are defined in src/app/app.routes.ts as an array of Route objects:

app.routes.ts

import { Routes } from '@angular/router';
import { Home } from './pages/home/home';
import { Browse } from './pages/browse/browse';
import { SearchResults } from './pages/search-results/search-results';
import { MovieDetail } from './pages/movie-detail/movie-detail';
import { Watchlist } from './pages/watchlist/watchlist';
import { watchlistGuard } from './guards/watchlist-guard';

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'browse', component: Browse },
  { path: 'search', component: SearchResults },
  { path: 'movies/:id', component: MovieDetail },
  { path: 'watchlist', component: Watchlist, canActivate: [watchlistGuard] },
  { path: '**', redirectTo: '' }
];

Each route has:

• path: The URL segment to match. '' matches the root. 'movies/:id' matches any path like movies/550 and exposes id as a route parameter.
• component: The component to render when the path matches.
• **: A wildcard that matches any unrecognized URL — here used to redirect to the home page.

Providing the router

In app.config.ts, add provideRouter(routes) to the providers array:

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

This registers the Angular router with your application and tells it which routes to use.

The router-outlet

<router-outlet> is a placeholder in the root component’s template. Angular renders the current route’s component inside this placeholder:

app.html

<app-nav-bar />
<main class="main-content">
  <router-outlet />
</main>
<app-toast />

When the URL is /, Angular renders Home inside <router-outlet>. When it becomes /browse, Angular replaces Home with Browse — without touching NavBar or Toast, which are outside the outlet.

Importing RouterOutlet

RouterOutlet is a standalone directive. Import it in the root component:

app.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavBar } from './components/nav-bar/nav-bar';
import { ToastComponent } from './components/toast/toast';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NavBar, ToastComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {}

The wildcard redirect

The { path: '**', redirectTo: '' } route at the end catches any URL that does not match a defined route. The order matters — the router tries routes in order, so the wildcard must be last.

Exercise

1. In your practice project, create two simple components: pages/home and pages/about.
2. Update app.routes.ts to map '' to Home and 'about' to About.
3. In app.config.ts, add provideRouter(routes).
4. In app.html, add <router-outlet /> (and import RouterOutlet in app.ts).
5. Run ng serve. Navigate to http://localhost:4200 and http://localhost:4200/about manually in the address bar. Confirm the correct component renders.

Recap

• Routes are defined in app.routes.ts as an array of { path, component } objects.
• ':paramName' in a path creates a route parameter (e.g., 'movies/:id').
• { path: '**', redirectTo: '' } is the catch-all wildcard route — always last.
• Register the router with provideRouter(routes) in app.config.ts.
• Add <router-outlet /> to app.html where page components should render.
• Import RouterOutlet in app.ts’s imports array.