javascript - 在使用 jspm 配置运行 typescript angular2 应用时页面加载出错

我有一个小型的 Angular2 应用，它使用 Observable 来进行一些基本的 HTTP 交互。

我能够在正常的 Node 环境中正常运行该应用程序。

我正在尝试配置该应用程序以使用 jspm 配置文件。

然而，当页面加载时，我在rxjs模块周围遇到多个资源加载失败的错误。

Failed to load resource: the server responded with a status of 404 (Not Found)
...localhost:3002/jspm_packages/npm/[email /observable/.js Failed to load resource: the server responded with a status of 404 (Not Found)...localhost:3002/jspm_packages/npm/[email /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/[email /subject/.js(…)
...localhost:3002/jspm_packages/npm/[email /observable/.js Failed to load resource: the server responded with a status of 404 (Not Found)

以下是我的 jspm-config 和 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:[email ",
"d3": "npm:[email ",
"es6-promise": "npm:[email ",
"es6-shim": "github:es-shims/[email ",
"lodash": "npm:[email ",
"process": "npm:[email ",
"reflect-metadata": "npm:[email ",
"rxjs": "npm:[email ",
"zone.js": "npm:[email ",
"github:jspm/[email ": {
  "assert": "npm:[email "
},
"github:jspm/[email ": {
  "buffer": "npm:[email "
},
"github:jspm/[email ": {
  "constants-browserify": "npm:[email "
},
"github:jspm/[email ": {
  "crypto-browserify": "npm:[email "
},
"github:jspm/[email ": {
  "events": "npm:[email "
},
"github:jspm/[email ": {
  "path-browserify": "npm:[email "
},
"github:jspm/[email ": {
  "process": "npm:[email "
},
"github:jspm/[email ": {
  "stream-browserify": "npm:[email "
},
"github:jspm/[email ": {
  "string_decoder": "npm:[email "
},
"github:jspm/[email ": {
  "util": "npm:[email "
},
"github:jspm/[email ": {
  "vm-browserify": "npm:[email "
},
"npm:[email ": {
  "crypto": "github:jspm/[email ",
  "es6-promise": "npm:[email ",
  "es6-shim": "npm:[email ",
  "process": "github:jspm/[email ",
  "reflect-metadata": "npm:[email ",
  "rxjs": "npm:[email ",
  "zone.js": "npm:[email "
},
"npm:[email ": {
  "assert": "github:jspm/[email ",
  "bn.js": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "fs": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "minimalistic-assert": "npm:[email ",
  "vm": "github:jspm/[email "
},
"npm:[email ": {
  "util": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "buffer-xor": "npm:[email ",
  "cipher-base": "npm:[email ",
  "create-hash": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "evp_bytestokey": "npm:[email ",
  "fs": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "browserify-aes": "npm:[email ",
  "browserify-des": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "crypto": "github:jspm/[email ",
  "evp_bytestokey": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "cipher-base": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "des.js": "npm:[email ",
  "inherits": "npm:[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "constants": "github:jspm/[email ",
  "crypto": "github:jspm/[email ",
  "randombytes": "npm:[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "browserify-rsa": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "create-hash": "npm:[email ",
  "create-hmac": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "elliptic": "npm:[email ",
  "inherits": "npm:[email ",
  "parse-asn1": "npm:[email ",
  "stream": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "base64-js": "npm:[email ",
  "child_process": "github:jspm/[email ",
  "fs": "github:jspm/[email ",
  "ieee754": "npm:[email ",
  "isarray": "npm:[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "stream": "github:jspm/[email ",
  "string_decoder": "github:jspm/[email "
},
"npm:[email ": {
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "crypto": "github:jspm/[email ",
  "elliptic": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "cipher-base": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "fs": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "ripemd160": "npm:[email ",
  "sha.js": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "create-hash": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "stream": "github:jspm/[email "
},
"npm:[email ": {
  "browserify-cipher": "npm:[email ",
  "browserify-sign": "npm:[email ",
  "create-ecdh": "npm:[email ",
  "create-hash": "npm:[email ",
  "create-hmac": "npm:[email ",
  "diffie-hellman": "npm:[email ",
  "inherits": "npm:[email ",
  "pbkdf2": "npm:[email ",
  "public-encrypt": "npm:[email ",
  "randombytes": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "minimalistic-assert": "npm:[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "crypto": "github:jspm/[email ",
  "miller-rabin": "npm:[email ",
  "randombytes": "npm:[email ",
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "brorand": "npm:[email ",
  "hash.js": "npm:[email ",
  "inherits": "npm:[email ",
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "create-hash": "npm:[email ",
  "crypto": "github:jspm/[email "
},
"npm:[email ": {
  "inherits": "npm:[email "
},
"npm:[email ": {
  "util": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "brorand": "npm:[email "
},
"npm:[email ": {
  "asn1.js": "npm:[email ",
  "browserify-aes": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "create-hash": "npm:[email ",
  "evp_bytestokey": "npm:[email ",
  "pbkdf2": "npm:[email ",
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "child_process": "github:jspm/[email ",
  "create-hmac": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "path": "github:jspm/[email ",
  "process": "github:jspm/[email ",
  "systemjs-json": "github:systemjs/[email "
},
"npm:[email ": {
  "assert": "github:jspm/[email "
},
"npm:[email ": {
  "bn.js": "npm:[email ",
  "browserify-rsa": "npm:[email ",
  "buffer": "github:jspm/[email ",
  "create-hash": "npm:[email ",
  "crypto": "github:jspm/[email ",
  "parse-asn1": "npm:[email ",
  "randombytes": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "crypto": "github:jspm/[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "core-util-is": "npm:[email ",
  "events": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "isarray": "npm:[email ",
  "process": "github:jspm/[email ",
  "stream-browserify": "npm:[email ",
  "string_decoder": "npm:[email "
},
"npm:[email ": {
  "assert": "github:jspm/[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "assert": "github:jspm/[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email ",
  "fs": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "events": "github:jspm/[email ",
  "inherits": "npm:[email ",
  "readable-stream": "npm:[email "
},
"npm:[email ": {
  "buffer": "github:jspm/[email "
},
"npm:[email ": {
  "inherits": "npm:[email ",
  "process": "github:jspm/[email "
},
"npm:[email ": {
  "indexof": "npm:[email "
},
"npm:[email ": {
  "es6-promise": "npm:[email ",
  "process": "github:jspm/[email "
}
}
});

这是 package.json 文件。

{
"name": "analytics-ui",
"version": "0.0.1",
"description": "The Analytics UI Application.",
"author": "[email ",
"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"
}
}

答案＃1

在这里添加一个相关的 GitHub 问题链接。根本原因仍不完全清楚（可能与 rxjs 的一个错误版本有关？）。但是清除 npm 和 jspm 缓存然后重新安装似乎解决了这个问题：

> npm cache clean
> jspm cache-clear

答案＃2

类似的问题通过将 es7-reflect-metadata 更新到 1.6.0 和 typescript 更新到 1.8.2 得以解决。你只需在 package.json 中更改版本并运行 npm install 就可以做到。

在此解决方案之前。