How to disable url changes with Angular routing

4289 views angular
7

I have an app that is being hosted by a 3rd party vendor that will render it in an iframe. I need to prevent the URL from changing, or maybe I should say that I need Angular not to expect the URL changes.

I've found posts that show how to prevent it on specific routing calls, but the URL is updated when the app loads too.

answered question

1 Answer

8

If you don't wish to have the URL updated, at all, you need to do two things.

First, add:

{ initialNavigation: false }

to the router settings like this:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: false })],
  exports: [RouterModule]
})

Unfortunately, I couldn't find a way to update this globally, so you will need to set the following for each navigation point in the app.

With router-links:

<a routerLink="/home" routerLinkActive="active" skipLocationChange="true" >Home</a>

With ts navigation calls:

router.navigate(['/home', { skipLocationChange: true }];

I hope this helps!

posted this

Have an answer?

JD

Please login first before posting an answer.