{skipLocationChange : true} in router.navigate not working; changing the state

Question

I am trying to embed Angular app on JSP page, for some reasons I need browser to preserve the state and don't want angular to push new state to browser history.

As per Angular documentation { skipLocationChange: true } will allow me to do that. Below is my modified code.

this.router.navigate(['/customComponent'],{ skipLocationChange: true });

still Angular is pushing new history state in browser history.

state: {navigationId: 2}

Below is the console snapshot.

Is anything wrong with routing code? Or I am missing any parameters.

I just tested it and it works perfectly fine. Would you mind posting the html of the button triggering the navigation and the ts of the component calling this.router.navigate ? — Bernard Pagoaga, Apr 18 '19 at 15:10
It worked for me as well when I created new app with bare bones, but not working in actual app, unfortunately because of organization policies I can not post actual code here, but will post some part of the code. — Akshay Naik, Apr 18 '19 at 15:47
@BernardPagoaga , Below is the link of example I am trying but not working . https://stackblitz.com/edit/angular-eewr2h?file=src%2Fapp%2Fapp.component.html — Akshay Naik, Apr 19 '19 at 05:21
Hey @BernardPagoaga I found the issue and adding the answer. — Akshay Naik, Apr 19 '19 at 07:31

score 2 · Accepted Answer · edited Feb 23 '21 at 12:39

2

The issue was routing configuration in app.module.ts. Since angular routes default path to customComponent, it modifies the state and there is no provision to pass skipLocationChange parameter, I had to reroute to customComponent using skipLocationChange from appComponent constructor which is bootstrapped in my case.

Directly bootstrapping customComponent will also help depending upon code written.

const appRoutes: Routes = [
{
    path: '',
    redirectTo: "/customComponent",
    pathMatch: 'full'
},

edited Feb 23 '21 at 12:39

Roy

7,811
4
24
47

answered Apr 19 '19 at 07:31

Akshay Naik

669
1
6
22

1

I am having the same problem. Could you please explain a little further? – Gacci Jan 26 '20 at 22:32
For clarification, are you embedding angular app in JSP page? – Akshay Naik Jan 29 '20 at 07:12

score 0 · Answer 2 · answered May 17 '21 at 14:22

I use this this.router.navigate(['process-form/' + processDefCustomId + '/' + taskId], { skipLocationChange: true }); in constructor() and skipLocationChange: true doesn't work.

I move my code to the ngOnInit() method and skipLocationChange: true works.

{skipLocationChange : true} in router.navigate not working; changing the state

2 Answers2