When performing basic route navigation in an Angular 9 application, handling page not found (also known as error 404) and redirecting routes to other routes is a very common task. Luckily for us Angular make this really easy for us.

To redirect a route, simply set the “redirectTo” property of a path, to the path of the desired route. For example; to redirect the default path of your Angular application to a products route, simple define a redirected route as follows

{ path: "", redirectTo: '/products', pathMatch: 'full' }

Sometimes when navigating your Angular application, a user may try to navigate to a route that does not exist. This will result in a 404 error, or a “Page Not Found” error. Ideally when this occurs, you will send your user to a page with details about the failed navigation. To do this, you will use a “wild card” route to intercept invalid URLs and handle them gracefully.

A wildcard route has a path consisting of two asterisks. It matches every URL. The router will select this route if it can’t match a route earlier in the configuration. A wildcard route can navigate to a custom “404 Not Found” component or redirect to an existing route.

{ path: "**", component: PageNotFoundComponent } "

Desktop to Web: A WPF Developers Guide to Learning Angular” is a video tutorial series that will help you take your WPF and WinForms desktop coding skill to the web with Angular. This series will help you understand how your current desktop skills map directly to concepts in Angular to make your learning path to the web as easy and painless as possible. During each video in this series I will be giving away a one year subscription to Infragistics Ultimate valued at $1,995 USD. Simply subscribe to my channel, like the video, and leave a comment to be entered. Winners are announced in the next video in the series.

Brian Lagunas

View all posts

Follow Me

Follow me on Twitter, subscribe to my YouTube channel, and watch me stream live on Twitch.