Normal anchor links throwing route not found errors


#1

How do I add a normal anchor links to an Aurelia view without getting console errors from the router?

If I do:

<a href="#myElement">Jump to element</a>
...
<input id="myElement">

Then the link works, and the input field gets focus - but I get a console error:

ERROR [app-router] Error: Route not found: /myElement

How can I prevent that error?


#2

Appears I can do it with JavaScript. Not sure if this is ideal, but it seems to work.

In this case, I am linking to an input element from an error message in a block at the top of the view.

<template>
  <ul class="error-block" if.bind="controller.errors.length">
    <li repeat.for="error of controller.errors">
      <a href="#" click.trigger="jump(error.propertyName)">${error.message}</a>
    </li>
  </ul>
</template>
import {bindable} from 'aurelia-framework';

export class ErrorSummary {
  @bindable
  controller;

  jump(id) {
    const el = document.getElementById(id);
    el.scrollIntoView(true);
    el.focus();
  }
}


#3

This is weird. I cannot reproduce your issue.

Here’s my HTML:

<a href="#test1">Test 1</a>
<a href="#test2">Test 2</a>
(a bunch of <br>)
<div id="test1">Test 1</div>
<input id="test2">

When I click Test 1 link, it scrolls to Test 1 div.
When I click Test 2 link, it scrolls to and focuses Test 2 input.

Note: I’m using skeleton generated with latest CLI.


#4

Can you try adding router-ignore to the anchor?


#5

@ khuongduybui
The links work OK - correct elements get the focus. But I am seeing console errors.

ERROR [app-router] Error: Route not found: /myElement

@bigopon
Adding router-ignore

<template>

  <ul class="error-block" if.bind="hasErrors">
    <li repeat.for="error of controller.errors">
      <a href="#${error.propertyName}" router-ignore>${error.message}</a>
    </li>
  </ul>

</template>

did not work - still seeing:

aurelia-logging-console.js?dc89:47 ERROR [app-router] Error: Route not found: /surname
    at AppRouter._createNavigationInstruction (aurelia-router.js?e32b:1097)
    at AppRouter.loadUrl (aurelia-router.js?e32b:1707)
    at BrowserHistory._loadUrl (aurelia-history-browser.js?d627:293)
    at BrowserHistory._checkUrl (aurelia-history-browser.js?d627:286)
error @ aurelia-logging-console.js?dc89:47
(anonymous) @ aurelia-logging.js?30fd:38
(anonymous) @ aurelia-router.js?e32b:1710
tryCatcher @ bluebird.js?f684:5276
Promise._settlePromiseFromHandler @ bluebird.js?f684:3297
Promise._settlePromise @ bluebird.js?f684:3354
Promise._settlePromise0 @ bluebird.js?f684:3399
Promise._settlePromises @ bluebird.js?f684:3475
(anonymous) @ bluebird.js?f684:175
(anonymous) @ bluebird.js?f684:4530
attributes (async)
(anonymous) @ bluebird.js?f684:4516
attributes (async)
scheduleToggle @ bluebird.js?f684:4524
schedule @ bluebird.js?f684:4533
Async.settlePromises @ bluebird.js?f684:174
Promise._reject @ bluebird.js?f684:3442
Promise._settlePromise @ bluebird.js?f684:3369
Promise._settlePromiseCtx @ bluebird.js?f684:3391
(anonymous) @ bluebird.js?f684:165
(anonymous) @ bluebird.js?f684:4530
attributes (async)
(anonymous) @ bluebird.js?f684:4516
attributes (async)
scheduleToggle @ bluebird.js?f684:4524
schedule @ bluebird.js?f684:4533
Async.invoke @ bluebird.js?f684:164
Promise._then @ bluebird.js?f684:3046
Promise.then @ bluebird.js?f684:2910
loadUrl @ aurelia-router.js?e32b:1707
_loadUrl @ aurelia-history-browser.js?d627:293
_checkUrl @ aurelia-history-browser.js?d627:286

#6

Can you try reproduce based on this https://codesandbox.io/s/8py714q8v8


#7

Yes. See: https://codesandbox.io/s/lyz00rkrqq

Simply add a link to an input:

  <a href="#surname">Go to surname field</a> <br /><br />
  <input type="text" id="surname" />

Click the link - see the console error.

Also, in the test case, the link does not work - input does not get the focus. That works OK in my own code. Maybe the test is busted because no <base href="/"> in the <head> or something like that.


#8

Oh I see what you meant. Please have a look here. https://github.com/aurelia/router/issues/527

Currently ignoring unknown route is still a feature request. Probably will be tackled in 2.0 beta-x.


#9

Yes - I figured there was some bug/missing feature. I got around it with just calling a jump function - not ideal, but better than generating errors.

Thanks for looking at this.