MEAN Cookbook

How to do it...

Let's add a 404 page to our application for when a user attempts to access an invalid route:

1. We can redirect a user to our 404 page using the Angular router's navigateByUrl method:

...export class PostComponent implements OnInit {  postId = null;  constructor(private route:ActivatedRoute, private router:Router) {    route.params.subscribe(      params =>{        this.postId = parseInt(params['id']);        if (isNaN(this.postId)) {           this.router.navigateByUrl("/404")        }      }    );  }}

2. To prevent the browser's URL from showing the /404 route name, we will provide the skipLocationChange flag:

...if (isNaN(this.postId)) {   this.router.navigateByUrl("/404", { skipLocationChange: true })}...

3. Now when we land on an invalid route, we will see the 404 page content ...