A common problem with web applications is a user landing on an invalid URI; this error, known as the venerable 404 - page not found error, is a common fallback error case when the application is unable to redirect or resolve a route in an application. Let's configure our Angular application to handle these error cases.
Handling 404 errors in an Angular project
How to do it...
In Angular, we can use our RouterModule configuration to catch any route that doesn't match our configuration by defining a wildcard route in our configuration, as follows:
RouterModule.forRoot([
...
{
path: "**",
component: PageNotFoundComponent
}
])
How it works...
By setting the path as **, we will catch any route that is not first served by the routes defined above this wildcard route configuration. We then direct the user to a new component we generated with ng g component page-not-found to serve the user a 404 message informing them that the page they have attempted to reach is not available.