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.
I’ve got the sources loading just fine but now I get this error (skeleton-app)
Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://flickr/' cannot be created in a document with origin 'http://127.0.0.1:9000'.
Nevermind:
Issue:
https://github.com/aurelia/history-browser/pull/11
FixIt:
jspm install aurelia-animator-css aurelia-binding aurelia-bootstrapper aurelia-dependency-injection aurelia-framework aurelia-http-client aurelia-router aurelia-event-aggregator aurelia-history-browser aurelia-loader-default aurelia-loader aurelia-metadata aurelia-route-recognizer aurelia-templating-binding aurelia-templating-resources aurelia-templating-router aurelia-templating aurelia-logging aurelia-task-queue aurelia-history aurelia-path
BTW: Note to self, join/read the gitter channel
@Benjamin,
I see you found the solution. The author of this post (Dwayne) is actually the person who submitted the PR. He goes by Vheissu on Github. Seems the issue is a regression issue from the previous release.
Dwayne, if you’re reading, thank you for the PR. You saved me some headaches myself.
I experienced the same issue, however, after reading the Aurelia documentation again I saw that I didn’t add a tag to my index.html.
Adding
to the section of my index.html fixed things and Pushstate is working without prefixing all the path entries.
Mine actually looks like this:
paths: {
“*”: “dist/*”,
“github:*”: “jspm_packages/github/*”,
“npm:*”: “jspm_packages/npm/*”
}
And if I change them to:
paths: {
“*”: “/dist/*”,
“github:*”: “/jspm_packages/github/*”,
“npm:*”: “/jspm_packages/npm/*”
}
I get:
(SystemJS) Error: ENOENT: no such file or directory, open ‘/jspm_packages/github/systemjs/plugin-text@0.0.8.js’
at Error (native)
Error loading /jspm_packages/github/systemjs/plugin-text@0.0.8.js
[11:27:41] ‘export’ errored after 2 s
[11:27:41] Error in plugin ‘run-sequence(bundle)’
Message:
bundle promise
When I do `$ gulp export`.
Any ideas?
Well I immediately solved it by adding [base href=”/”] to my index.html. I also had to change all [link]s and [script]s to begin with “/” (they were all relative before) (note I’m using square brackets because I wasn’t allowed to post this otherwise)
I’m trying to host my app on S3 and need to use pushstate (as my API platform (MongoDb Stitch) does not work with # in the url).
However this results in a 404. I have followed many articles suggesting using CloudFront to redirect 404s to /index.html. However now I get AccessDenied (not sure why as my S3 bucket is publicly accessible.
Any thoughts?
Thanks
Tim