It is undeniable that the angular/router package is full of useful features. This time, instead of focusing on an a single and precise topic, we’re going to look at some interesting facts and properties of this package that you might not be aware of. These can range from sorts of comparisons(e.g relative vs absolute redirects) to nonobvious details(e.g RouterOutlet’s hierarchy; how the URL is set in the browser etc).

This article assumes the reader has some basic knowledge of Angular Router(e.g. route navigations, outlets). By the end of it, you should have a better understanding of what this package is capable of.

Relative vs Absolute Redirects

When setting up the route configuration array, we often come across the redirectTo property. Although its purpose is defined by its name, it also has a few interesting traits that are worth examining.

The path this property takes in can either be relative or absolute. Before revealing the differences between these 2 options, let’s see what configuration we’ll be using:

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: DefaultComponent
  },
  {
    path: 'a/b',
    component: AComponent, // reachable from `DefaultComponent`
    children: [
      {
        // Reached when `redirectTo: 'err-page'` (relative) is used
        path: 'err-page',
        component: BComponent,
      },
      {
        path: '**',
        redirectTo: 'err-page'
      },
    ],
  },
  {
    // Reached when `redirectTo: '/err-page'` is used
    path: 'err-page',
    component: DComponent,
  }
]

#angular #angular router