Sometimes users might type in a wrong URL manually or click on an outdated link. In such cases, it's important to show a clear "Page Not Found" message instead of a blank screen or a technical error. In this module, we'll create a 404 page component, configure our routes to display it for all unknown paths, and add some polished styling.

Creating the NotFoundComponent

We'll create a new Angular component called NotFoundComponent to serve as our 404 page. It will display a headline, a short error message, and a button to redirect the user back to the homepage.

Run the following command to generate the component:

This will automatically create a not-found folder with four files. You're already familiar with these files, and you can go ahead and delete the test file if you're not using it.

Building the Component

Let's add the HTML to show a "404" title, a simple message, and a "Go to Home" button:

It's a simple layout, with one special part — the goToHome() method. When the button is clicked, the user is redirected to the homepage.

Adding the Navigation Logic

Now let's implement the method to navigate the user back to the home page.

Here, we inject Angular's Router to manually navigate between routes. In the goToHome() method, we use navigate(['/']) to send the user to the root route.

Handling All Unknown Routes

Now we'll update the app's routing configuration to show the NotFoundComponent for any undefined paths.

In your app.routes.ts file, add the following route at the very end:

The ** path is a wildcard that matches any route that doesn't match earlier ones. For example, navigating to /wrong-url will display the 404 page.

Why Should the Wildcard Route Always Be Last?

In Angular, route configuration is evaluated in order—from top to bottom. This means that the router checks each route sequentially, and once it finds a match, it stops searching.

The wildcard route ({ path: '**' }) is a catch-all route. It matches any path that wasn't matched by the previous routes. If you place it before more specific routes, it will catch everything, and the rest of the routes will never be reached—even if they're valid.

Now your app gracefully handles navigation errors: instead of crashing or showing a blank screen, users see a friendly 404 message with a clear way back to the homepage.

Your app is now fully functional and user-friendly! 🎉 If you'd like to download the complete version of this project, just click the button below.