Getting Aurelia To Work With HTML5 pushState

Recently in Aurelia I ran into a peculiar issue using the bundled Browser Sync Gulp task for deploying a test server. When visiting a parameterised URL the paths to the System packages would break. It turns out by default the paths are set in a way they will add onto the current URL instead of referencing the root “/” as the base path.

In /config.js where all of the paths are setup, right up the top you will see a few paths set. Mine looks like the following (yours probably does as well):

System.config({
    "paths": {
        "*": "*.js",
        "github:*": "jspm_packages/github/*.js",
        "npm:*": "jspm_packages/npm/*.js"
    }
});

In my situation, I had a parameterised URL point to /reports/:reportid however when visiting this URL, all include paths would try loading from /reports/jspm_packages/ instead of the expected /jspm_packages/.

I have no idea if this problem is isolated to the Browser Sync testing server or not, but it was very puzzling. Then I realised that the paths need to be set like this to work with parameterised URL’s correctly:

System.config({
    "paths": {
        "*": "/*.js",
        "github:*": "/jspm_packages/github/*.js",
        "npm:*": "/jspm_packages/npm/*.js"
    }
});

All we did was add a forward slash to the source values of the paths object. This forces the loader to always reference the root directory. I initially tried to set the baseUrl value on the config object, but for some reason it had a few issues with the Browser Sync testing server running. This method is confirmed working.

I did not see any mention of this issue in the documentation, so I assume perhaps something weird with my environment could be to blame. I am running an Aurelia application within Windows, so perhaps it could be differences in how paths are resolved in Windows vs a Unix based operating system like Mac OS.