How to disable url changes with Angular routing
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
angular angular-routing angular7
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
add a comment |
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
angular angular-routing angular7
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
add a comment |
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
angular angular-routing angular7
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
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
angular angular-routing angular7
angular angular-routing angular7
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
edited Dec 1 '18 at 11:19
Goncalo Peres
1,3261318
1,3261318
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
asked Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
724721
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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!
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
add a comment |
A better approach would be to implement a route guard at the root route (or a wildcard) that just always returns false.
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '**',
canActivate: [NeverActivate]
}
])
],
providers: [NeverActivate, UserToken, Permissions]
})
@Injectable()
class NeverActivate implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean {
return false; // never allow activation
}
}
answered Nov 7 '18 at 20:53
Zze
9,53553667
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53196790%2fhow-to-disable-url-changes-with-angular-routing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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!
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
add a comment |
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!
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
add a comment |
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!
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
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!
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
edited Nov 7 '18 at 19:57
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
answered Nov 7 '18 at 19:50
Wayne F. Kaskie
724721
724721
add a comment |
add a comment |
A better approach would be to implement a route guard at the root route (or a wildcard) that just always returns false.
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '**',
canActivate: [NeverActivate]
}
])
],
providers: [NeverActivate, UserToken, Permissions]
})
@Injectable()
class NeverActivate implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean {
return false; // never allow activation
}
}
answered Nov 7 '18 at 20:53
Zze
9,53553667
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
add a comment |
A better approach would be to implement a route guard at the root route (or a wildcard) that just always returns false.
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '**',
canActivate: [NeverActivate]
}
])
],
providers: [NeverActivate, UserToken, Permissions]
})
@Injectable()
class NeverActivate implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean {
return false; // never allow activation
}
}
answered Nov 7 '18 at 20:53
Zze
9,53553667
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
add a comment |
A better approach would be to implement a route guard at the root route (or a wildcard) that just always returns false.
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '**',
canActivate: [NeverActivate]
}
])
],
providers: [NeverActivate, UserToken, Permissions]
})
@Injectable()
class NeverActivate implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean {
return false; // never allow activation
}
}
answered Nov 7 '18 at 20:53
Zze
9,53553667
A better approach would be to implement a route guard at the root route (or a wildcard) that just always returns false.
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '**',
canActivate: [NeverActivate]
}
])
],
providers: [NeverActivate, UserToken, Permissions]
})
@Injectable()
class NeverActivate implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean {
return false; // never allow activation
}
}
answered Nov 7 '18 at 20:53
Zze
9,53553667
answered Nov 7 '18 at 20:53
Zze
9,53553667
answered Nov 7 '18 at 20:53
Zze
9,53553667
answered Nov 7 '18 at 20:53
Zze
9,53553667
9,53553667
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
add a comment |
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
I want the root to activate, but I can't have the URL change. So a route guard used this way wouldn't help.
– Wayne F. Kaskie
Nov 7 '18 at 20:55
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
Then don't put it on the route, whack it on the parent of the path you want to protect...
– Zze
Nov 8 '18 at 2:37
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
I think you're missing what I'm trying to accomplish. I'm not trying to guard or protect anything other than my href.location. I need to do exactly my answer accomplishes in this case.
– Wayne F. Kaskie
Nov 12 '18 at 15:51
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53196790%2fhow-to-disable-url-changes-with-angular-routing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
