Search code examples
angularangular-routingwindow-object

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

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.

enter image description here

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

Solution

  • 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'
},