How can I get the previous route as a path in Angular?

Question

I tried using a solution via this link, but it does not execute on first page load.

constructor(router: Router) {
  router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((event: NavigationEnd) => {
    console.log('prev:', event.previousUrl);
    this.previousUrl = event.url;
  });
}

I used both RoutesRecognized and NavigationEnd, however they did not work.

I called this method in the constructor and ngOnInit, but neither of them execute on first page load.

Is there any method of obtaining the previous URL?

Thank you.

jeremy-denis · Answer 1 · 2022-02-28T15:11:07.067

In a constructor you can use

this.router.getCurrentNavigation().previousNavigation.finalUrl.toString()

to get the previous route path

Be careful if you use this.router.getCurrentNavigation() outside a constructor it will be too late from life cycle and you will always have a null value

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().previousNavigation.finalUrl.toString());
}

Andrei Gătej · Answer 2 · 2022-12-21T16:39:09.060

2

The Router class exposes a getCurrentNavigation() method:

getCurrentNavigation(): Navigation|null {
  return this.currentNavigation;
}

Router.currentNavigation is of type Navigation:

private currentNavigation: Navigation|null = null;

As we can see from Navigation's definition, you can access the previous navigation with the previousNavigation property:

previousNavigation: Navigation | null;

So, you could use this property to get the previous path.

Update

As O.MeeKoh suggested, getCurrentNavigation() must be called from the constructor.

edited Dec 21 '22 at 16:39

answered Jul 28 '20 at 09:18

Andrei Gătej

11,116
1
14
31

2

I get "Cannot read property 'previousNavigation' of null" when I use this. – SkogensKonung May 26 '21 at 13:33
@Dawid How are you using it? – Andrei Gătej May 26 '21 at 13:58
Same here all of these properties are null or undefined for me. I access them from `ngOnInit` `this.router.getCurrentNavigation()` | `this.router.getCurrentNavigation()?.previousNavigation` – O.MeeKoh Dec 21 '22 at 15:16
This works, but it has to be inside of the constructor. If you update your answer you may get more upvotes. – O.MeeKoh Dec 21 '22 at 15:20
Does this approach work with Angular 15? – NAbdulla Jul 26 '23 at 10:23

score 0 · Answer 3 · answered Jul 27 '20 at 14:30

you can try navigationStart to resolve your problem of not getting the previous route for the first time.

you can refer the below lines of code for the getting the idea how to us that.

ngOnInit(){
    this._router.events.filter(e => e instanceof NavigationStart )
      .bufferCount(2,1).subscribe(e => {
        if(e !== null && e !== undefined) this.orginalPath = e[0]['url'].substr(1)
    });
  }

Even you can try the method pairwise() if it resolves your problem.

router.events
  .pipe(
    filter(e => e instanceof NavigationEnd),
    pairwise() // check it's second route load
  )
  .subscribe((e: any[]) => {
    console.log(e);
  });

Thanks for reply @Minal Shah....it tried your part ...but its not working at all... — Ricky, Jul 28 '20 at 08:10

How can I get the previous route as a path in Angular?

3 Answers3

Update

Linked