Back to Tips

Wildcard Routes

To display a 404 page, Angular provides the possibility of adding a wildcard route. The Angular Router selects the wildcard route anytime the requested URL doesn't match any paths for routes defined in the configuration.

Set up a wild card route with the component property set to the component you would like to use on your 404 page as follows:

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  { path: "second-component", component: SecondComponent },
  { path: "**", component: PageNotFoundComponent }, // Wildcard route for a 404 page
];

Support

If you enjoyed this tip and found it useful, consider buying me a coffee. Thanks in advance!

Buy Me a Coffee at ko-fi.com
Using Angular v.18.0.6 🚀