angular 2 route to 404 page when route param is invalid

Question

Say I have an route with a param like this (in Angular 2): /user1/products/:id, which could have child routes like /user1/products/3/reviews.

When I navigate to /user1/products/-1, I check with my server and if the product doesn't exist, I want to render a 404 page without affecting the browser history.

Using router.navigate(['/404']) or router.navigateByUrl('/404') doesn't seem to work because it adds both /user1/products/-1 and/404 to the browser history.

Meaning when I press the Back button in the browser, I go back to /user1/products/-1 which is immediately redirected to /404 and I'm essentially stuck at /404.

In ExpressJS, we would do something like next() to pass the request to our 404 handler. Is there a client-side equivalent in Angular 2?

Answer 1

As of Angular 2 final this is the solution:

this._router.navigateByUrl('/404', { skipLocationChange: true })

Answer 2

Ok, this is already implemented, just not well-documented.

According to the docs:
router.navigateByUrl(url: string, _skipLocationChange?: boolean) : Promise<any>

Has a parameter _skipLocationChange that will not modify the history.
These will do the trick:

router.navigateByUrl('/404', true); router.navigateByInstruction(router.generate(['/404']), true);