SystemJS (Aurelia with jspm) fails to load "aurelia-pal-browser" from jspm_packages folder

Question

I've followed the instructions at https://www.danylkoweb.com/Blog/getting-started-with-aurelia-in-aspnet-mvc-EH, step 3-5 to install Aurelia in to my asp.net mvc core app (i.e. running npm install, jspm init, jspm install aurelia-framework and jspm install aurelia-bootstrapper).

My "startup code" just looks like this for now:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    SystemJS.import('aurelia-bootstrapper');
</script>

When I run the application I can see on Chrome dev tools that a lot of Aurelia resources (js files) are loaded under the /jspm_packages/npm folder, but I also get an error like this:

Uncaught (in promise) Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:39535/aurelia-pal-browser.js Error: XHR error (404 Not Found) loading http://localhost:39535/aurelia-pal-browser.js Error loading http://localhost:39535/aurelia-pal-browser.js

For some reason SystemJS starts looking for aurelia-pal-browser.js in the root of my application. I suppose it can't find the jspm_packages\npm\[email protected] folder but it's there and I have that same version number in the config.js file.

Full config.js as I got it after running the jspm commands:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: false,
  paths: {
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "aurelia-bootstrapper": "npm:[email protected]",
    "aurelia-framework": "npm:[email protected]",
    "npm:[email protected]": {
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-event-aggregator": "npm:[email protected]",
      "aurelia-framework": "npm:[email protected]",
      "aurelia-history": "npm:[email protected]",
      "aurelia-history-browser": "npm:[email protected]",
      "aurelia-loader-default": "npm:[email protected]",
      "aurelia-logging-console": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-pal-browser": "npm:[email protected]",
      "aurelia-polyfills": "npm:[email protected]",
      "aurelia-router": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]",
      "aurelia-templating-binding": "npm:[email protected]",
      "aurelia-templating-resources": "npm:[email protected]",
      "aurelia-templating-router": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-logging": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-loader": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-history": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-loader": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-logging": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-path": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-event-aggregator": "npm:[email protected]",
      "aurelia-history": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-route-recognizer": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-pal": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-loader": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-router": "npm:[email protected]",
      "aurelia-templating": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "aurelia-binding": "npm:[email protected]",
      "aurelia-dependency-injection": "npm:[email protected]",
      "aurelia-loader": "npm:[email protected]",
      "aurelia-logging": "npm:[email protected]",
      "aurelia-metadata": "npm:[email protected]",
      "aurelia-pal": "npm:[email protected]",
      "aurelia-path": "npm:[email protected]",
      "aurelia-task-queue": "npm:[email protected]"
    }
  }
});

Answer 1

I did not read your linked article, but what you may try is install [email protected] as a dependency as well so it is explicitly listed in your package.json and your config.js.

Simply execute the following on the cmd line:

jspm install npm:aurelia-pal-browser