Navigation storm in angular pilets

[LBraeschke]

Bug Report

For more information, see the CONTRIBUTING guide.

Prerequisites

• Can you reproduce the problem in a MWE? yes https://github.com/LBraeschke/piral-angular-nav-loop-bug/tree/master
• Are you running the latest version? yes
• Did you perform a search in the issues? yes

Environment Details and Version

Piral 1.4.3
Framework: Angular
OS: Windows 10
Browser Chrome

Description

[Description of the bug]

Steps to Reproduce

1. checkout https://github.com/LBraeschke/piral-angular-nav-loop-bug/tree/master
2. go to piral-debug-webpack5 and run npm install
3. build emulator by running piral build --type emulator
4. go to pilet-angular-webpack5 and run npm install
5. run npm run start
6. open browser at http://localhost:1234
7. press the 'To Sharing' link

Expected behavior

Navigation is only executed 15 times

Actual behavior

Navigation is executed way more often. It seems it is realted to the computing power of the machine. On faster machine it is way more unlikely to occur and also it resolve faster, after fewer navigations.

[Optionally, share your idea to fix the issue]
My guess is the Prial-Ng RoutingService.ts

 const queueNavigation = (url: string) => {
        // I guess this is the problem
        // the navigation frame is not yet available therefore the next router event is also queued and the setup of the navigation storm is completed
        window.requestAnimationFrame(() => nav.push(url));
      };

....
      
      this.subscription = this.router.events.subscribe((e: NavigationError | NavigationStart | Scroll) => {
       const locationUrl = nav.url;
....
       } else if (e.type === 15) {
          const index = skipIds.indexOf(e.routerEvent.id);

          if (index === -1) {
            // consistency check to avoid #535 and other Angular-specific issues
            const locationUrl = nav.url;
            const routerUrl = e.routerEvent.url;

            if (routerUrl !== locationUrl) {
              queueNavigation(routerUrl);
            }

My idea would be:

let targetUrl: string;
 const queueNavigation = () => {
        window.requestAnimationFrame(() => nav.push(targetUrl));
      };

....
      
      this.subscription = this.router.events.subscribe((e: NavigationError | NavigationStart | Scroll) => {
       const locationUrl = nav.url;
....
       } else if (e.type === 15) {
          const index = skipIds.indexOf(e.routerEvent.id);

          if (index === -1) {
            // consistency check to avoid #535 and other Angular-specific issues
            const locationUrl = nav.url;
            const routerUrl = e.routerEvent.url;

            if (routerUrl !== locationUrl) {
              targetUrl = routerUrl;
              queueNavigation();
            }

[FlorianRappl]

PRs are on this one are welcome :)