How to disable url changes with Angular routing

Wayne F. Kaskie

My Angular 7 app needs to be rendered in an iFrame. Due to the peculiar nature of the system, I need to prevent the URL from changing, or maybe I should say that I need Angular not to expect the URL to change.

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

The objective is to maintain the URL like: website.com/applicaition, even when the route changes such that there is no update to the window.location.

https://website.com/application [desired for every view] https://website.com/application/home [NOT desired for ANY view]

Thanks, Wayne

Wayne F. Kaskie

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 });

(Ref: https://angular.io/api/router/NavigationExtras)

I hope this helps!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related