Bugged named outlet with lazy-loaded module & empty parent route path  #48472

Activity

1. atscott commented on Dec 13, 2022

   

   atscott

   on Dec 13, 2022

   Contributor

   More actions

   This is actually a different issue than the ones you have linked to. The ones you linked are related to the route matching algorithm but the problem here is UrlTree creation - you can see that the routerLink href already has the problem with creating crazy URLs before you attempt navigation.

   With that, this issue is (partially) fixed by #45877. Unfortunately, there wasn't enough time for me to land it as a breaking change in v15 by swapping out the implementation of router.createUrlTree for this fixed behavior. In short, the current behavior is super round-about and is incapable of creating the correct result in many scenarios. I plan to include createUrlTreeFromSnapshot as a breaking change to router.createUrlTree in v16.
2. atscott

   closed this as completedon Dec 13, 2022
3. juliancarrivick commented on Dec 14, 2022

   

   juliancarrivick

   on Dec 14, 2022

   Author

   More actions

   Great, thanks @atscott, it looks like you've been doing lots of great work in this space! 🙂 Shame it didn't make it into v15, but I'm sure I'll blink and v16 will be out!

   When you say it's been "partially" fixed, are there any particular scenarios where you know it's broken still?
4. atscott commented on Dec 14, 2022

   

   atscott

   on Dec 14, 2022

   Last edited by atscott

   Contributor

   More actions

   By "partially" I mean that it isn't the default for router.createUrlTree (and so it's not fixed for routerLink). If it were, you wouldn't have had to file this bug in the first place :)

   edit: to answer your question directly, there are no scenarios that I know of that do not working correctly.
5. juliancarrivick commented on Dec 14, 2022

   

   juliancarrivick

   on Dec 14, 2022

   Author

   More actions

   Ah, so this is just an issue with the generation of the link, not with the routing specifically.

   So, if I understand correctly, I should be able to manually craft the URL, or use the new createUrlTreeFromSnapshot function to generate the URLTree which I would be able to use directly as a workaround?
6. juliancarrivick commented on Dec 14, 2022

   

   juliancarrivick

   on Dec 14, 2022

   Author

   More actions

   Yep, I confirmed this works 😄

   I had to do the navigation on the click event (and preventDefault the event), but it seems to work! I created a helper directive to encapsulate this - hope it helps someone else!

   import { Directive, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
   import { ActivatedRoute, createUrlTreeFromSnapshot, NavigationEnd, Router, UrlTree } from '@angular/router';
   import { BehaviorSubject, combineLatest, filter, map, startWith, Subscription } from 'rxjs';
   
   @Directive({
       standalone: true,
       selector: '[appHelpRouterLink]',
   }) export class HelpRouterLinkDirective implements OnDestroy {
       @Input('appHelpRouterLink') public set helpCommands(commands: unknown[] | null) {
           this.helpCommands$.next(commands);
       }
       private helpCommands$ = new BehaviorSubject<unknown[] | null>(null);
   
       @HostBinding('href') public href?: string;
       private urlTree?: UrlTree;
   
       private subscription: Subscription;
   
       public constructor(
           private router: Router,
           route: ActivatedRoute,
       ) {
           const otherNavigations = this.router.events.pipe(
               filter((e): e is NavigationEnd => e instanceof NavigationEnd),
               map(() => route.snapshot),
               startWith(route.snapshot),
               filter(r => r.outlet !== 'help'),
           );
           this.subscription = combineLatest([
               otherNavigations,
               this.helpCommands$,
           ]).subscribe(([snapshot, commands]) => {
               this.urlTree = createUrlTreeFromSnapshot(snapshot, [{ outlets: { help: commands } }]);
               this.href = this.router.serializeUrl(this.urlTree);
           });
       }
   
       public ngOnDestroy(): void {
           this.subscription.unsubscribe();
       }
   
       @HostListener('click', ['$event'])
       public navigate(event: Event) {
           if (!this.urlTree) {
               return;
           }
   
           event.preventDefault();
           this.router.navigateByUrl(this.urlTree);
       }
   }
7. angular-automatic-lock-bot commented on Jan 14, 2023

   

   angular-automatic-lock-botbot

   on Jan 14, 2023

   More actions

   This issue has been automatically locked due to inactivity.
   Please file a new issue if you are encountering a similar or related problem.

   Read more about our automatic conversation locking policy.

   _{This action has been performed automatically by a bot.}
8. angular-automatic-lock-bot

   locked and limited conversation to collaborators on Jan 14, 2023