Angular Router - navigation event fired twice

[Noirox]

Hi,

when route is changed with Angulars Route, then the store will create new navigation event, which will result in two same router events.

For example:

<a [routerLink]="someLink">test me</a>

After you click that link, router will do the navigation, which is then pickup by the listener from connect.ts as stored state is different, but it will also call the Router to change location to the same url, resulting into two same navigation events.

[petercn]

Has anyone looked into this? I believe I'm getting the same double firing behavior, any ideas for how to fix this?

[brandonroberts]

Can someone provide a simple reproduction of this issue?

[inzerceubytovani]

Same problem here, to reproduce just listen NavigationStart event:

this.router.events.filter(event => event instanceof NavigationStart).subscribe(() =>console.log('nav start'));

[dresdor]

This appears to still be happening. Is there any workaround (besides designing anything that listens to this to be able to fire twice without issue) or any plan to fix this?

[aerlijman]

I came to this issue having a bug with the back button, that if I do this A->B->C and click back, it loops betwen C and B instead of going back to A. I am pretty sure it is related to this issue of the NavigationStart being fired twice. Any update?

[brandonroberts]

No updates. Version 2.x of @ngrx/router-store is no longer being maintained. You should upgrade as we have a full migration document from 2.x to 4.x(the same migration applies to 5.x which is the latest version).

[aerlijman]

But this is still happening in Angular 5.x the one I have upgraded when I detected this thing. Any ideas? Are you still being able to duplicate it?

[dresdor]

@aerlijman can you share the code you are using to listen to the event? We discovered that if we use any of the events that get called by the routing process (ngOnInit, ngOnInitFinished, etc) that the method will get called once during the normal routing process and again when the listener hits

[aerlijman]

In ngOnInit I have

        this.router.events.filter(event => event instanceof NavigationStart).subscribe(() => {
          
        });

[felikf]

Hi, I am facing similar issue with ActivationEnd fired twice for single navigation (Angular 5, NGRX 4).

I have tried to isolate the issue here: https://github.com/felikf/angular-router-double-navigation

The interesting part is in router.effects.ts:

private listenToRouter() {
    this.router.events
        .filter(e => e instanceof ActivationEnd)
        .subscribe((event: ActivationEnd) => {

            // const url = event.snapshot._routerState.url
            this.logger.log(`Route Change: ${this.previousPath} => ${event.snapshot.routeConfig.path}`);

            this.store.dispatch(new routerActions.RouteChange({
                params: { ...event.snapshot.params },
                queryParams: { ...event.snapshot.queryParams },
                path: event.snapshot.routeConfig.path,
                previousPath: this.previousPath
            }));

            this.previousPath = event.snapshot.routeConfig.path;
        });
}

@brandonroberts please see this

[ohabash]

I got around this by making sure to unsubscribe at the appropriate times. in my case it was

onRouteChange() {
	this._routeListener = this.router.events.subscribe((event) => ...);
}

ngOnDestroy() {
	this._routeListener.unsubscribe();
}

[BBaysinger]

I'm seeing one subscription to router.events yield three calls to the callback function, and each reports instanceof event as ActivationEnd.

console.log('This code runs only once, at site initialization.');
router.events.subscribe((event: RouterEvent) => {
    if (event instanceof ActivationEnd) {
        console.log('This should only log once per route change, but logs three times.');
    };
});

Is this really a bug, or am I missing something?

[BBaysinger]

Oh. I figured out my problem: https://stackoverflow.com/a/50808849/1253298

I should have been using NavigationEnd, not ActivationEnd.