Handling Unknown Route Paths
Explore how to manage unknown routes by creating a wildcard route that displays a PageNotFound component in Angular. Learn to define a default route that directs users to a desired path on app bootstrap and understand the importance of route order for proper navigation.
We'll cover the following...
We came across the concept of unknown routes. We set up a wildcard route to display PageNotFoundComponent when our application tries to navigate to a route path that does not exist. Now, it is time to add that component for real:
Use the
generatecommand of the Angular CLI to create a new component namedpage-not-found:
Note: The command below is for creating a new component locally using the Angular CLI.
ng generate component page-not-found
Our application will display the newly generated component when navigating to an unknown route path.
Open the
page-not-found.component.htmlfile and replace its content with a meaningful HTML template: