In this post, we will see how we can handle 404 routes using a not found component in an Angular.
There are two types of 404 routes that we want to handle.
- Static 404 – the URL the user navigates to doesn’t match any route
- Dynamic 404 – the URL matches a route, but the data associated with that route does not exist. For example, you navigate to a detail page with an ID, but no item exists with that ID.
For this post, I assume that there is a component named NotFoundComponent that is the not found page to show the user. Replace this with whatever component
Static 404 routes
To set up a static 404 page, you need to add two routes to your RoutingModule configuration.
const routes: Routes = [
// Other routes
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }
]
We used a catchall route '**' that matches whatever route didn’t match above, and shows our not found page.
Make sure to keep the catchall route at the end of your routes, otherwise the routes below it will not be accessible.
Another option here would’ve been to redirect the user to the '404' route, but that way you lose the context of the URL. If the user navigates back, he would go to the non-existing route and be redirected to the '404' path again. If this is the behavior you want, switch the last route with { path: '**', redirectTo: '404' }.
Dynamic 404 routes
Now that we have the static 404 route configured, we can use the router to navigate to it whenever we want to show the not found page to the user.
this.router.navigate(['/404'], { skipLocationChange: true });
By using the option skipLocationChange: true, we have the same behavior as mentioned above. Even though the router navigates to the route, the browser URL stays the same, allowing the user to easily go back.
Personalizing the 404 message
You may want to personalize the message shown on the 404 page. One way to do this is using the navigation state.
When navigating to the 404 page, you can include a state in the navigation options.
this.router.navigate(['/404'], {
skipLocationChange: true,
state: {
// Whatever data you need on the 404 page
source: 'article',
id: 123456
}
});
On your NotFoundComponent, you can access this object in the constructor using the router’s getCurrentNavigation method.
export class NotFoundComponent {
constructor(private router: Router) {
console.log(this.router.getCurrentNavigation().extras.state.source);
}
}
You must access the state in the constructor, as it is only available while the router is navigating.
Conclusion
In this post, we saw how to implement a 404 route in Angular. We looked at how we can redirect to it dynamically and even how to personalize the 404 page with route dependent data!
Have questions, corrections, or an alternative way of handling this? Leave a comment or reach out to me on Twitter @pedronavelopes and let me know! Thanks for reading!
