ThisCalculator

Everyday

Angular Nested and Named Routes with Router Outlets

Updated · Standard formula, shown below

Angular Nested and Named Routes with Router Outlets

Angular router outlets let a route display a component inside a page, while nested routes place one outlet inside another and named outlets show separate views side by side. This guide sets up both patterns, links to them, and explains how to check the URL and outlet names when navigation fails. You’ll need an Angular project with the router installed and a basic understanding of components and TypeScript.

What You’ll Need

  • An Angular application that uses Angular Router. Newer projects commonly configure routes in app.routes.ts and provide the router in app.config.ts; projects using AppRoutingModule can apply the same route definitions there.
  • Components for the pages you want to display. Generate them with Angular CLI or create them using your project’s usual approach.
  • A root <router-outlet> in the application shell, plus a second outlet in the parent component for child routes.

Step-by-Step

  1. Plan the route layout. For example, use /projects for a project section, /projects/42 for a project’s details, and a named outlet to show a help panel beside the main view. A child route is rendered in an outlet belonging to its parent component. A named outlet is an additional target, identified by a name, for a route displayed alongside the primary view.
  2. Create the components. This example assumes you have ProjectsComponent, ProjectDetailComponent, HelpPanelComponent, and a component for the project overview. The overview is the default child page; the detail component displays a selected project. Adapt the component names and paths to your application.
  3. Put the root outlet in the application shell. In the root template, add <router-outlet></router-outlet>. This is where top-level routes such as the projects section are displayed. If this outlet is missing, the URL may change without showing the expected routed component.
  4. Define the nested and named routes. In a standalone routing setup, define routes in app.routes.ts and export them as a Routes array. For example:
    import { Routes } from '@angular/router';
    export const routes: Routes = [
      { path: 'projects', component: ProjectsComponent, children: [
        { path: '', component: ProjectOverviewComponent },
        { path: ':id', component: ProjectDetailComponent }
      ] },
      { path: 'help', component: HelpPanelComponent, outlet: 'side' }
    ];
    Import the components used in the route definitions. The child path :id is relative to projects, so it matches a URL such as /projects/42. The outlet: 'side' property associates the help route with an outlet named side.
  5. Register the routes. In a standalone application, make sure the application providers include provideRouter(routes), commonly in app.config.ts. In a module-based application, configure the routes with RouterModule.forRoot(routes) in the root routing module. Do not register the same application routes with both approaches.
  6. Add an outlet to the parent component. In projects.component.html, place <router-outlet></router-outlet> where the overview or project detail should appear. The parent component stays visible around this outlet; the matched child component is inserted at that location. The root outlet alone cannot render the child inside the projects page.
  7. Add the named outlet. Place <router-outlet name="side"></router-outlet> in the shell or another component that remains present when the named route is active. The name must match the route’s outlet value exactly. Add layout styles, such as a grid, if the main and side views should appear next to each other; outlets determine placement in the template, not the layout design.
  8. Navigate to the nested route. Use a normal router link such as <a [routerLink]="['/projects', 42]">Open project</a> to reach /projects/42. To make a link relative to the current route, inject ActivatedRoute and provide it with [relativeTo]="route" where appropriate. Absolute links begin at the application root; relative links depend on the current route.
  9. Open or close the named route. To show the help panel alongside the current primary route, use <a [routerLink]="[{ outlets: { side: ['help'] } }]">Help</a>. To close that outlet, navigate with [routerLink]="[{ outlets: { side: null } }]". Angular represents multiple active outlets in the URL with parentheses, for example /projects/42(side:help). The exact URL can vary with the surrounding route and link context.
  10. Check the active components and URL. Run the app, open a parent route, then test a child URL and the help link. Confirm that the parent remains visible, the child appears inside its outlet, and the named component appears in the outlet named side. Use browser back and forward to check that route state changes as expected.

Common Mistakes

  • Forgetting the child outlet. A child route can match and update the URL, but it has nowhere to render unless its parent template contains a router outlet.
  • Using a mismatched outlet name. name="sidePane" does not match outlet: 'side'. Match spelling and capitalization precisely.
  • Putting child paths in the wrong place. A child path such as :id is appended to its parent’s path. Defining it as a separate top-level route changes the route hierarchy and where it renders.
  • Expecting a named outlet to replace the primary page. Named outlets are separate targets. The primary route and named route can be active at the same time, and their URL segments may be shown in parentheses.
  • Using a plain href for internal navigation. A normal link can cause a full page load. Use routerLink for Angular-managed navigation unless a full reload is intended.

Tips

  • Use clear outlet names, such as side, modal, or preview, and keep them consistent between route configuration and templates.
  • Use path: '' as a child route when the parent should show a default view. Without a matching default child, the parent’s outlet can remain empty at the parent URL.
  • Keep shared navigation and page framing in the parent template. The child outlet is a useful boundary for content that changes while the surrounding layout stays in place.
  • For links rendered by a routed child, use the current ActivatedRoute when building relative navigation. If the resulting URL is surprising, switch temporarily to an explicit absolute link to isolate the issue.

Troubleshooting

If the URL changes but a view is blank, inspect the route hierarchy: verify that the route matches, its component is imported, and an outlet exists in the component that owns that route. For a child route, check the parent’s template first. For a named route, check both that the target outlet is present and that its name exactly matches the configured outlet name.

If navigation goes to an unexpected URL, review whether the link is absolute or relative and inspect the current route used for relative navigation. Check that the child path is not written with an unintended leading slash. If the primary view works but the side view does not, verify the named-outlet link syntax and that the named route is configured at the intended level.

If a direct URL works after navigating from the home page but fails when entered in the address bar or refreshed, the development or production web server may not be configured to serve the Angular app for client-side routes. Configure the server’s fallback to the application entry point according to that server’s documentation. Also check the browser console for route configuration or missing-component errors.

Frequently Asked Questions

What is the difference between a nested route and a named outlet?
A nested route is a child in the route hierarchy and renders in an outlet inside its parent component. A named outlet is an additional outlet target that can display a route independently of the primary outlet.

Can a page have more than one router outlet?
Yes. It can have a primary outlet and one or more named outlets. Each named outlet needs a unique name within its template and a matching route configuration when used.

Why does my parent component show but the child does not?
The parent may be matching correctly while its template lacks a <router-outlet>, or the child path may not match the URL. Check the parent’s children and the exact path.

How do I close a named outlet?
Navigate to the current route with that outlet set to null, for example [routerLink]="[{ outlets: { side: null } }]". Ensure the link is evaluated in the appropriate route context.

Do named outlets require special CSS?
No. Angular routes the component into the outlet, but CSS controls its size and position. Use a layout such as grid or flexbox if outlets should sit beside one another.

Can I use these patterns with lazy-loaded routes?
Yes. Nested and named outlets can be used with lazy-loaded route configurations. Keep the route hierarchy and outlet placement aligned, and follow the same matching rules for paths and outlet names.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.