Angular prevent URL navigation but keep button navigation

I'm currently trying to prevent the user from navigate through the url itself. The user should only be able to navigate with buttons.

Basically my routing looks like this :

const routes: Routes = [
{ path: 'form', component: FormComponent},
{ path: '', redirectTo: '/form', pathMatch: 'full' },
{ path: 'attachment', component: AttachmentComponent },
{ path: 'inbox', component: InboxComponent},
{ path: 'summary', component: SummaryComponent },
{ path: 'answer/:id', component: SummaryComponent}
];


So basically the user should be able to navigate to "/form" and "answer/:id" with the url itself but all the other routes like attachment/inbox/summary should be accessable by buttons only (e.g user goes on /form and theres a button which directs to attachment and summary or the user goes on "/answer:id" with a button with directs to inbox).

First thing I tried was setting the following parameter in my routing module(without setting a guard) :

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


Navigate through the url was not possible(which is good) and navigate with buttons worked but sadly I was not able to open my "form" or "answer" route which is necessary.
I tried setting up a guard :

const routes: Routes = [
{ path: 'form', component: FormComponent},
{ path: '', redirectTo: '/form', pathMatch: 'full' },
{ path: 'attachment', component: AttachmentComponent , canActivate:[DirectAccessGuard]},
{ path: 'inbox', component: InboxComponent, canActivate: [DirectAccessGuard]},
{ path: 'summary', component: SummaryComponent, canActivate: [DirectAccessGuard]},
{ path: 'answer/:id', component: SummaryComponent}
];


Guard :

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DirectAccessGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
// If the previous URL was blank, then the user is directly accessing this page
return false;
}
}


Opening "form" and "answer" with the url is possible but redirect to another component with a buttons doesn't work. Makes senses because I'm always returning false.
So my question is : Is it possible to get the target url in my guard?
If im on /form and I want to redirect to /attachment I know I can get "/form" with this.router.url but I want the target url ("/attachment" in this case). Or is there any other method to solve my problem?

Continue reading...