How to Create a Custom 404 Page in Angular

When someone is navigating through our system, it’s possible that a request is made to a route that, for some reason, is unavailable, resulting in an error.

Error when accessing a non-existent route in Angular
v

To prevent this error, it is common practice to create friendly 404 error pages, informing the user that the resource is unavailable.

In Angular, we can display the 404 page using the wildcard route.

Wildcard route
Wildcard route {**}

It’s important to remember that the wildcard route should be the last route added, as Angular’s router will only select this resource if none of the previous ones match the URL requested by the user.

The wildcard route must be the last route to be added
The wildcard route must be the last route to be added

I hope this helps.

The project link is on GitHub.

Post Comment