Angular 2: Prevent router from adding to history

My Stack Overfloweth picture My Stack Overfloweth · Feb 3, 2017 · Viewed 10.5k times · Source

We have a client that is iFraming in our app to their website. They don't want the router navigation within our app to affect the back button navigation for their own site.

We've tried a couple methods including using post messages to try and have the iFrame communicate with the parent window whenever a history.back() is triggered.

My question is if there is any easy way to not affect the browser's history when using Angular 2's router. As far as I know, I couldn't find anything within Angular 2's advanced router documentation: https://angular.io/docs/ts/latest/guide/router.html

Answer

My Stack Overfloweth picture My Stack Overfloweth · Feb 3, 2017

It turns out there is a built-in way for Angular 2's routing to skip adding a state to the history. We actually found it checking through random properties inside the intellisense of the editor.

Our routing code just had to go from:

this.router.navigate([`/myPage/${this.Id}`], { relativeTo: this.route });

to:

this.router.navigate([`/myPage/${this.Id}`], { relativeTo: this.route, skipLocationChange: true });