Learning Angular/

...

/

Handling Unknown Route Paths

Handling Unknown Route Paths

Learn how to handle unknown routes by setting up a default route and create a wildcard route in Angular.

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:

  1. Use the generate command of the Angular CLI to create a new component named page-not-found:

Note: The command below is for creating a new component locally using the Angular CLI.

ng generate component page-not-found
Command to create a component

Our application will display the newly generated component when navigating to an unknown route path.

  1. Open the page-not-found.component.html file and replace its content with a meaningful HTML template:

Press + to interact
<h3>Ooops!</h3> 
<p>The requested page was not found</p>
    ...