Router load attribute: broken when using id & parameters.bind

[migajek]

tl;dr load attribute broken when using id and parameters.bind:
Uncaught (in promise) Error: 1 remaining instructions after 100 iterations; there is likely an infinite loop.

I started with the original "recipes" app from router tutorial. Modified the stackblitz only to update aurelia 2 to beta10.
Then I've:

• added id: 'recipe-details', to Recipe Details route definition
• modified recipes-page template to following:

<a load="/recipes/${recipe.idMeal}">${recipe.strMeal} [original]</a> |
    <a load="id: recipe-details; parameters.bind: {recipeId: recipe.idMeal}"><u>${recipe.strMeal} [bug]</u></a>

• both elements render identical a href (see below):

• however when clicking the first one (original) it loads fine. when clicking the second one, I'm getting
  Uncaught (in promise) Error: 1 remaining instructions after 100 iterations; there is likely an infinite loop.

Repro: please head to "recipes" page and try opening any of the recipe details using the underlined link. See console for error.
https://stackblitz.com/edit/au2-conventions-ptqpuz?file=src%2Frecipes-page.html

[johnmanko]

@migajek

Have you tried changing parameters.bind to params.bind?

From the docs:

And where things start to get interesting is when you want to pass parameters to a route. We use the params configuration property to specify parameters.

[migajek]

@johnmanko unfortunately the docs is simply wrong on this, as stated in the comment here by @jwx :
#1835 (comment)

In router, the load bindables are id and parameters

This seems to be indeed the case:

@bindable public parameters?: Parameters;
...
@bindable public id?: string;

https://github.com/aurelia/aurelia/blob/master/packages/router/src/resources/load.ts#L17

[migajek]

Did a little debugging.
The LinkHandler that does the actual router.load when the a is clicked, receives the following call:

This ends up with the following error

However when I call the similar load directly from the controller code (so I use <a click.trigger="myMethod(.. instead of <a load="id: .., parameters.bind: ..) it loads fine.

the only obvious difference, except for the call context, is the lack of { origin: target } in my controller call.

Now, when I added the {origin: $event.target} to mimic the LinkHandler behavior, I'm getting the exact same exception.

But why? Well, that's beyond my understanding :)

[bigopon]

This is the log I get after clicking around in the recipes page:

Stackblitz is at https://stackblitz.com/edit/au2-conventions-vbk6gr

Everything seems to work fine, I'm using beta-13 though. Can you help try repro again @migajek ?

[migajek]

@bigopon I ran yours repro, headed to recipes and clicked the underlined item. This is what I ended up with:

please note I haven't touched anything.

I tried it in 3 browsers:

• Chrome 122
• Firefox 121
• Edge 122

all running Windows 10.
Also checked in incognito mode of Chrome and Firefox just to make sure.
Each time I'm getting the error as in the screenshot above.

What browser are you running? Are you sure you clicked the underlined link of the recipe? The underlined links for each recipe (on the right hand side) are supposed to repro the bug; the regular links work just fine

[bigopon]

@migajek I clicked on the normal link, clicking on the underlined link gave me the same errors, thanks!

[bigopon]

So far, from what I see, this issue boils down to the router.load with the following differences:

1. Working:

   router.load({
     id: 'recipe-details',
     parameters: { recipeId: '52767' }
   })
   // or
   router.load({
     id: 'recipe-details',
     parameters: { recipeId: '52767' }
   }, {
     origin: undefined
   })

2. not working:

   router.load({
     id: 'recipe-details',
     parameters: { recipeId: '52767' }
   }, { 
     origin: the_anchor_with_href_to_the_recipe_page
   })

It means the presence of the origin, which is the <a> element, in the router.load options breaks it.
cc @jwx