Routing issue in Aurelia with route params

Question

Using Aurelia CLI 0.32, I have this route config

public configureRouter(config: RouterConfiguration, router: Router): void {
    this.router = router;

    config.options.pushState = true;
    config.options.root = '';
    config.map([
      { route: ['', 'home'], name: "home", moduleId: 'home/index', title: 'Main page' },
      { route: 'editroute/:id', name: "editroute", moduleId: 'edit/index', title: 'Edit Page' }
    ]);

    config.fallbackRoute('');
}

Using a link

<a route-href="route: editroute; params.bind: {id:item.id}">Edit ${item.name}</a>

I can navigate to the route. But refreshing the page in the browser causes an error as seen in the screenshot

It is running on asp.net and there is a rewrite rule to support pushstate

<rewrite>
  <rules>
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{URL}" matchType="Pattern" negate="true" pattern=".*\/((api|signalr)\/.*|loaderio.*)" ignoreCase="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

What am I doing wrong?

Thanks

EDIT: This error only occurs on routes with routeparameters

I've just run your codesample in an empty, aurelia only app and - after correcting it in [the edit](https://stackoverflow.com/posts/48564788/revisions) - it just works. As you mention, it only occurs on refresh. So if the edit doesn't help, it has to do something with ASP.NET. Perhaps you can explain a bit if it's ASP.NET MVC, or Core 2? And your config in there, like [RouteConfig](https://stackoverflow.com/questions/36650287/how-to-remove-from-url-in-aurelia) or Startup. — Juliën, Feb 01 '18 at 16:01
Thanks for the edit, I forgot the square bracket when i prepared the sample. The culprit is probably the rewrite rule, see my comment to @alexander-taran — Casper, Feb 01 '18 at 16:56

score 3 · Accepted Answer · answered Feb 01 '18 at 17:37

In order for server-side page refresh to work when you are on deep URL, you have to modify your aurelia_project/aurelia.json to use absolute paths when bundling modules:

{
    "build": {
        "targets": [
            {
                // ...
                "baseUrl": "/scripts",
                "useAbsolutePath": true
            }
        ],
        // etc...

Another place, which is maybe not necessary to change, but contains same properties is:

{
    "platform": {
        // ...
        "baseUrl": "/scripts",
        "useAbsolutePath": true
    }

Also, make sure you test Internet Explorer 11, since it's more picky then other browsers.

Of course, as already mentioned, you will also have to make sure that you use absolute paths for other resources as well (/scripts/vendor-bundle.js, font paths, etc..)

Marvelous, along with a slight change of the rewrite rule (adding the scripts folder to the exception) this now works. Thanks — Casper, Feb 01 '18 at 20:23

score 0 · Answer 2 · answered Feb 01 '18 at 16:07

0

1st step is to try to change relative path to scripts/vendor-bundle.js to absolute /scripts/vendor-bundle.js

If it won't fix your problem - it will at least prevent downloading all the scripts for every route (-:

The rule is at fault. Since your html asks for a script with a relative path - the server looks in "the directory" and there is no file. So it gives up your index.html (or whatever is served @ the root of site) instead of the script.

answered Feb 01 '18 at 16:07

Alexander Taran

6,655
2
39
60

Great, part way there. Changing the script to be absolute fixed loading of the vendor-bundle.js Now I need to get Aurelia to use an absolute path for the app-bundle,js as well. Maybe another rewrite rule... – Casper Feb 01 '18 at 16:55

Routing issue in Aurelia with route params

2 Answers2