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.