Error "Code 2002: Failed to resolve all viewports." with Direct Routing with Parameters example

[hanssens]

🐛 Bug Report

When following the docs at Direct Routing - Routers with parameters, I get the following error when navigating to a route through a parameter:

Cause is due to this:

<a goto="site-details(42)">${site.name}</a>

💁 Possible Solution

Simply append a / to the goto seems to work:

<a goto="/site-details(42)">${site.name}</a>

If it's just a slip of the pen in the docs, I'll gladly suggest an update through a PR. If I'm missing the bigger picture, I can provide more info.

🌍 Your Environment

Software	Version(s)
Aurelia	@dev
Language	English
Browser	Brave version 1.12.112 Chromium: 84.0.4147.125 (Official Build) (64-bit)
Bundler	Webpack
Operating System	macOS
NPM/Node/Yarn	Node v14.4.0, NPM v6.14.4

[fkleuver]

Thanks for reporting this. We're aware of the underlying issue and a fix is under way as part of a larger router refactor. (edit: just noticed your fix PR, but this is supposed to work)

[jwx]

This might not be a bug. In v2 gotos belong to a viewport context meaning that they are relative from the viewport (or root) they are in and they always start looking in their own context. As in

<app>
  <a goto="welcome">Welcome (will load in viewport below)</a>
  <au-viewport>
     <welcome>
       <a goto="about">About (this will fail since it looks for a viewport in the same context as itself)</a>
       <a goto="/about">About (this will succeed since it looks for a viewport starting in the root / context)</a>
       <a goto="../about">About (this will succeed since it looks for a viewport starting in the context above itself)</a>
    </welcome>
  </au-viewport>
</app>

This might need to be clarified in the docs. (@Vheissu)

Is the link that doesn't work targeting the viewport that it's in, @hanssens?

[fkleuver]

Yeah if there's no viewport in the same context then it should fail (though the error could be clearer), but this would also fail in v1 and in the linked examples there is a viewport in the same context, so I was kind of assuming that this wasn't the case.

[hanssens]

@jwx I'm not sure, because I don't fully grasp how the viewport context works. It is in a nested component.

FWIW - Here is my file structure:

/views/sites/site-detail.html
/views/sites/site-detail.ts
/views/sites/site-list.html
/views/sites/site-list.ts
app.ts
app.html

Please see the two EXAMPLES below, I hope that helps a bit.

app.html

<import from="./views/sites/site-list"></import>
<import from="./views/sites/site-details"></import>
<import from="./views/about.html"></import>
<import from="./views/missing"></import>

<nav>
  <a goto="site-list">Listing</a>
  <a goto="about">About</a>
  <a goto="site-details(${site.siteCode})">EXAMPLE 1 - WORKS, BECAUSE VIEWPORT BELOW?</a>
</nav>

<!--  TODO: removed default="welcome", see reported bug at https://github.com/aurelia/aurelia/issues/922 -->
<au-viewport fallback="missing"></au-viewport>

/views/site-list.html

<div>
	<!-- here is the "/" -->
	<a goto="/site-details(${site.siteCode})">EXAMPLE 2 - WORKS, BUT ONLY DUE TO ADDING "/"</a>
</div>

[jwx]

@hanssens Sorry for the confusion (and the long reply time). We'll have to look into the docs regarding this. In the meantime, I'm talking a bit about viewport scope/context here.

[fkleuver]

@hanssens does Are you still experiencing issues?

[Sayan751]

Closing this, due to lack of response. Feel free to reopen, if the issue persists.