Sharing Top Content from the Angular-sphere.

Wildcard Routes (**) Can Be Scoped To Route Sub-Trees In Angular 5.1.3

  • In the Angular router, you can use the wildcard path – ** – as a catch-all route to render things like a “Not Found” view or to redirect the user back to the root of the application.
  • But, from the documentation, and from many of the Angular Router demos that I’ve seen, one aspect that’s usually omitted (or unclear) is that an application can have more than one wildcard route.
  • The only important part of this application is the Router configuration in the application module: – – As you can see, there are two places in which I am using the wildcard (**) route: – – The root one redirects the user back to the root of the application.
  • That said, if we run this demo and navigate to the “/app/c” path, which does not exist in the route configuration, we get the following redirect: – – As you can see, when we redirect to the non-existing route “/app/c”, the root-level “**” catch-all route matches as the last possible…
  • Now, if we navigate to a non-existing route within the “/app/a” sub-tree, we get the following redirect: – – As you can see, this time, the missing route is handled by the “/app/a” level “**” catch-all and redirects us back to the root of the “/app/a” sub-tree, not to the…

Ben Nadel demonstrates that the wildcard route (**) can be used multiple times in an Angular 5.1.3 application. And, can be scoped to different portions of the Route configuration tree.

In the Angular router, you can use the wildcard path – ** – as a catch-all route to render things like a “Not Found” view or to redirect the user back to the root of the application. But, from the documentation, and from many of the Angular Router demos that I’ve seen, one aspect that’s usually omitted (or unclear) is that an application can have more than one wildcard route. And, that a wildcard route can be scoped to a sub-tree of an application. As such, I wanted to put together a quick demo to showcase this wildcard route feature in Angular 5.1.3.

Most of the code in this Angular 5.1.3 demo is immaterial – it just lays the ground-work for router-outlets and rendered views. The only important part of this application is the Router configuration in the application module:

import { NgModule } from “@angular/core”;

import { RouterModule } from “@angular/router”;

import { Routes } from “@angular/router”;

// Import the application components and services.

import { AppComponent } from “./app.component”;

import { AViewComponent } from “./a-view.component”;

import { BViewComponent } from “./b-view.component”;

path: “app”,

children: [

path: “a”,

component: AViewComponent,

children: [

path: “sub”,

// route prefix. It will only catch non-matching routes that live

// within this portion of the router tree.

path: “**”,

Wildcard Routes (**) Can Be Scoped To Route Sub-Trees In Angular 5.1.3