Error on page load running typescript angular2 app with jspm configuration

Question

I have a small angular2 application which observable for some basic http interactions.

I am able to run the app normally within a normal node setup.

I'm attempting to configure the application to use a jspm configuration file.

However, when the page loads I get several failed to load resource errors around rxjs modules.

Failed to load resource: the server responded with a status of 404 (Not Found)
...localhost:3002/jspm_packages/npm/rxjs@5.0.0-beta.2/observable/.js Failed to load resource: the server responded with a status of 404 (Not Found)...localhost:3002/jspm_packages/npm/rxjs@5.0.0-beta.2/operator/.js Failed to load resource: the server responded with a status of 404 (Not Found)
system.js:4 Uncaught (in promise) Error: XHR error (404 Not Found) loading ...localhost:3002/jspm_packages/npm/rxjs@5.0.0-beta.2/subject/.js(…)
...localhost:3002/jspm_packages/npm/rxjs@5.0.0-beta.2/observable/.js Failed to load resource: the server responded with a status of 404 (Not Found)

Below are my jspm-config, and package.json

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

packages: {
"app": {
  "format": "register",
   defaultJSExtensions: true
}
},

map: {
"angular2": "npm:angular2@2.0.0-beta.7",
"d3": "npm:d3@3.5.16",
"es6-promise": "npm:es6-promise@3.1.2",
"es6-shim": "github:es-shims/es6-shim@0.34.2",
"lodash": "npm:lodash@4.5.0",
"process": "npm:process@0.11.2",
"reflect-metadata": "npm:reflect-metadata@0.1.3",
"rxjs": "npm:rxjs@5.0.0-beta.2",
"zone.js": "npm:zone.js@0.5.15",
"github:jspm/nodelibs-assert@0.1.0": {
  "assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
  "buffer": "npm:buffer@3.6.0"
},
"github:jspm/nodelibs-constants@0.1.0": {
  "constants-browserify": "npm:constants-browserify@0.0.1"
},
"github:jspm/nodelibs-crypto@0.1.0": {
  "crypto-browserify": "npm:crypto-browserify@3.11.0"
},
"github:jspm/nodelibs-events@0.1.1": {
  "events": "npm:events@1.0.2"
},
"github:jspm/nodelibs-path@0.1.0": {
  "path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.2": {
  "process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-stream@0.1.0": {
  "stream-browserify": "npm:stream-browserify@1.0.0"
},
"github:jspm/nodelibs-string_decoder@0.1.0": {
  "string_decoder": "npm:string_decoder@0.10.31"
},
"github:jspm/nodelibs-util@0.1.0": {
  "util": "npm:util@0.10.3"
},
"github:jspm/nodelibs-vm@0.1.0": {
  "vm-browserify": "npm:vm-browserify@0.0.4"
},
"npm:angular2@2.0.0-beta.7": {
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "es6-promise": "npm:es6-promise@3.1.2",
  "es6-shim": "npm:es6-shim@0.33.13",
  "process": "github:jspm/nodelibs-process@0.1.2",
  "reflect-metadata": "npm:reflect-metadata@0.1.2",
  "rxjs": "npm:rxjs@5.0.0-beta.2",
  "zone.js": "npm:zone.js@0.5.15"
},
"npm:asn1.js@4.5.0": {
  "assert": "github:jspm/nodelibs-assert@0.1.0",
  "bn.js": "npm:bn.js@4.10.3",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "inherits": "npm:inherits@2.0.1",
  "minimalistic-assert": "npm:minimalistic-assert@1.0.0",
  "vm": "github:jspm/nodelibs-vm@0.1.0"
},
"npm:assert@1.3.0": {
  "util": "npm:util@0.10.3"
},
"npm:bn.js@4.10.3": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:browserify-aes@1.0.6": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "buffer-xor": "npm:buffer-xor@1.0.3",
  "cipher-base": "npm:cipher-base@1.0.2",
  "create-hash": "npm:create-hash@1.1.2",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "evp_bytestokey": "npm:evp_bytestokey@1.0.0",
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "inherits": "npm:inherits@2.0.1",
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:browserify-cipher@1.0.0": {
  "browserify-aes": "npm:browserify-aes@1.0.6",
  "browserify-des": "npm:browserify-des@1.0.0",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "evp_bytestokey": "npm:evp_bytestokey@1.0.0"
},
"npm:browserify-des@1.0.0": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "cipher-base": "npm:cipher-base@1.0.2",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "des.js": "npm:des.js@1.0.0",
  "inherits": "npm:inherits@2.0.1"
},
"npm:browserify-rsa@4.0.0": {
  "bn.js": "npm:bn.js@4.10.3",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "constants": "github:jspm/nodelibs-constants@0.1.0",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "randombytes": "npm:randombytes@2.0.2"
},
"npm:browserify-sign@4.0.0": {
  "bn.js": "npm:bn.js@4.10.3",
  "browserify-rsa": "npm:browserify-rsa@4.0.0",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "create-hash": "npm:create-hash@1.1.2",
  "create-hmac": "npm:create-hmac@1.1.4",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "elliptic": "npm:elliptic@6.2.3",
  "inherits": "npm:inherits@2.0.1",
  "parse-asn1": "npm:parse-asn1@5.0.0",
  "stream": "github:jspm/nodelibs-stream@0.1.0"
},
"npm:buffer-xor@1.0.3": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:buffer@3.6.0": {
  "base64-js": "npm:base64-js@0.0.8",
  "child_process": "github:jspm/nodelibs-child_process@0.1.0",
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "ieee754": "npm:ieee754@1.1.6",
  "isarray": "npm:isarray@1.0.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:cipher-base@1.0.2": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "inherits": "npm:inherits@2.0.1",
  "stream": "github:jspm/nodelibs-stream@0.1.0",
  "string_decoder": "github:jspm/nodelibs-string_decoder@0.1.0"
},
"npm:constants-browserify@0.0.1": {
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.2": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:create-ecdh@4.0.0": {
  "bn.js": "npm:bn.js@4.10.3",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "elliptic": "npm:elliptic@6.2.3"
},
"npm:create-hash@1.1.2": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "cipher-base": "npm:cipher-base@1.0.2",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "inherits": "npm:inherits@2.0.1",
  "ripemd160": "npm:ripemd160@1.0.1",
  "sha.js": "npm:sha.js@2.4.4"
},
"npm:create-hmac@1.1.4": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "create-hash": "npm:create-hash@1.1.2",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "inherits": "npm:inherits@2.0.1",
  "stream": "github:jspm/nodelibs-stream@0.1.0"
},
"npm:crypto-browserify@3.11.0": {
  "browserify-cipher": "npm:browserify-cipher@1.0.0",
  "browserify-sign": "npm:browserify-sign@4.0.0",
  "create-ecdh": "npm:create-ecdh@4.0.0",
  "create-hash": "npm:create-hash@1.1.2",
  "create-hmac": "npm:create-hmac@1.1.4",
  "diffie-hellman": "npm:diffie-hellman@5.0.2",
  "inherits": "npm:inherits@2.0.1",
  "pbkdf2": "npm:pbkdf2@3.0.4",
  "public-encrypt": "npm:public-encrypt@4.0.0",
  "randombytes": "npm:randombytes@2.0.2"
},
"npm:des.js@1.0.0": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "inherits": "npm:inherits@2.0.1",
  "minimalistic-assert": "npm:minimalistic-assert@1.0.0"
},
"npm:diffie-hellman@5.0.2": {
  "bn.js": "npm:bn.js@4.10.3",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "miller-rabin": "npm:miller-rabin@4.0.0",
  "randombytes": "npm:randombytes@2.0.2",
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:elliptic@6.2.3": {
  "bn.js": "npm:bn.js@4.10.3",
  "brorand": "npm:brorand@1.0.5",
  "hash.js": "npm:hash.js@1.0.3",
  "inherits": "npm:inherits@2.0.1",
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:es6-promise@3.1.2": {
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:es6-shim@0.33.13": {
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:evp_bytestokey@1.0.0": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "create-hash": "npm:create-hash@1.1.2",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0"
},
"npm:hash.js@1.0.3": {
  "inherits": "npm:inherits@2.0.1"
},
"npm:inherits@2.0.1": {
  "util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:lodash@4.5.0": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:miller-rabin@4.0.0": {
  "bn.js": "npm:bn.js@4.10.3",
  "brorand": "npm:brorand@1.0.5"
},
"npm:parse-asn1@5.0.0": {
  "asn1.js": "npm:asn1.js@4.5.0",
  "browserify-aes": "npm:browserify-aes@1.0.6",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "create-hash": "npm:create-hash@1.1.2",
  "evp_bytestokey": "npm:evp_bytestokey@1.0.0",
  "pbkdf2": "npm:pbkdf2@3.0.4",
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:path-browserify@0.0.0": {
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:pbkdf2@3.0.4": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "child_process": "github:jspm/nodelibs-child_process@0.1.0",
  "create-hmac": "npm:create-hmac@1.1.4",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "path": "github:jspm/nodelibs-path@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2",
  "systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:process@0.11.2": {
  "assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:public-encrypt@4.0.0": {
  "bn.js": "npm:bn.js@4.10.3",
  "browserify-rsa": "npm:browserify-rsa@4.0.0",
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "create-hash": "npm:create-hash@1.1.2",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "parse-asn1": "npm:parse-asn1@5.0.0",
  "randombytes": "npm:randombytes@2.0.2"
},
"npm:randombytes@2.0.2": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:readable-stream@1.1.13": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "core-util-is": "npm:core-util-is@1.0.2",
  "events": "github:jspm/nodelibs-events@0.1.1",
  "inherits": "npm:inherits@2.0.1",
  "isarray": "npm:isarray@0.0.1",
  "process": "github:jspm/nodelibs-process@0.1.2",
  "stream-browserify": "npm:stream-browserify@1.0.0",
  "string_decoder": "npm:string_decoder@0.10.31"
},
"npm:reflect-metadata@0.1.2": {
  "assert": "github:jspm/nodelibs-assert@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:reflect-metadata@0.1.3": {
  "assert": "github:jspm/nodelibs-assert@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:ripemd160@1.0.1": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:rxjs@5.0.0-beta.2": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:sha.js@2.4.4": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0",
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "inherits": "npm:inherits@2.0.1",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:stream-browserify@1.0.0": {
  "events": "github:jspm/nodelibs-events@0.1.1",
  "inherits": "npm:inherits@2.0.1",
  "readable-stream": "npm:readable-stream@1.1.13"
},
"npm:string_decoder@0.10.31": {
  "buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:util@0.10.3": {
  "inherits": "npm:inherits@2.0.1",
  "process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:vm-browserify@0.0.4": {
  "indexof": "npm:indexof@0.0.1"
},
"npm:zone.js@0.5.15": {
  "es6-promise": "npm:es6-promise@3.1.2",
  "process": "github:jspm/nodelibs-process@0.1.2"
}
}
});

here is the package.json file.

{
"name": "analytics-ui",
"version": "0.0.1",
"description": "The Analytics UI Application.",
"author": "david.kerman@thomsonreuters.com",
"devDependencies": {
"beepbeep": "^1.2.0",
"browser-sync": "^2.10.0",
"del": "^2.1.0",
"gulp": "^3.9.0",
"gulp-inline-ng2-template": "0.0.10",
"gulp-prompt": "^0.1.2",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^3.6.0",
"gulp-typedoc": "^1.2.1",
"gulp-typescript": "^2.8.0",
"jasmine-core": "^2.4.1",
"jspm": "^0.16.25",
"jspm-bower-endpoint": "^0.3.2",
"jspm-git": "^0.4.2",
"karma": "^0.13.21",
"karma-chrome-launcher": "^0.2.2",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.6",
"karma-jspm": "^2.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"lodash": "^4.2.1",
"phantomjs-prebuilt": "^2.1.4",
"typings": "^0.6.8"
},
"jspm": {
"configFile": "jspm-config.js",
"dependencies": {
  "angular2": "npm:angular2@^2.0.0-beta.7",
  "d3": "npm:d3@^3.5.16",
  "es6-promise": "npm:es6-promise@^3.1.2",
  "es6-shim": "github:es-shims/es6-shim@^0.34.4",
  "lodash": "npm:lodash@^4.5.0",
  "reflect-metadata": "npm:reflect-metadata@^0.1.3",
  "rxjs": "npm:rxjs@^5.0.0-beta.2",
  "zone.js": "npm:zone.js@^0.5.14"
  },
  "devDependencies": {}
},
"scripts": {
"jspm": "jspm",
"gulp": "gulp",
"typings": "typings"
}
}

Answer 1

Adding a link to a related github issue here. Still not exactly clear on the root cause (perhaps related to a bad release of rxjs?). But clearing the npm and jspm cache and then reinstalling seemed to resolve the issue:

> npm cache clean
> jspm cache-clear

Answer 2

Similar problem was solved with updating es7-reflect-metadata to 1.6.0 and typescript to 1.8.2. You can do it with just changing versions in package.json and running npm install.

Prior to this solution.