javascript - (SystemJS)XHR错误@ angular/commobundles/common.umd.js/http未找到

Question

我在我的应用程序中提出了一个简单的http请求。

我正在使用Angular 2 Quickstart并将所有我的 Angular 包更新为4.3.4

这是我的package.json
{
“name”:“angular-quickstart”，
“version”:“1.0.0”，
“description”:“文档中的QuickStart package.json，并附带测试支持”，
“脚本”:{
“build”:“tsc -p src/”，
“build:watch”:“tsc -p src/-w”，
“build:e2e”:“tsc -p e2e/”，
“serve”:“lite-server -c = bs-config.json”，
“serve:e2e”:“lite-server -c = bs-config.e2e.json”，
“prestart”:“npm run build”，
“start”:“同时\” npm run build:watch\“\” npm run serve\“”，
“pree2e”:“npm run build:e2e”，
“e2e”:“同时\” npm运行服务:e2e\“\” npm运行 Protractor “--kill-others-成功第一”，
“preprotractor”:“webdriver-manager更新”，
“protractor”:“protractor protractor.config.js”，
“pretest”:“npm run build”，
“test”:“同时\” npm run build:watch\“\” karma start karma.conf.js\“”，
“pretest:once”:“npm run build”，
“test:once”:“karma start karma.conf.js --single-run”，
“lint”:“tslint ./src/**/*.ts -t verbose”
}，
“关键字”:[]，
“作者”: ””，
“license”:“MIT”，
“依赖关系”:{
“@ angular/common”:“4.3.4”，
“@ angular/compiler”:“4.3.4”，
“@ angular/core”:“4.3.4”，
“@ angular/forms”:“4.3.4”，
“@ angular/http”:“4.3.4”，
“@ angular/platform-b​​rowser”:“4.3.4”，
“@ angular/platform-b​​rowser-dynamic”:“4.3.4”，
“@ angular/platform-server”:“4.3.4”，
“@ angular/router”:“4.3.4”，
“angular-in-memory-web-api”:“〜0.3.0”，
“core-js”:“^ 2.4.1”，
“rxjs”:“^ 5.4.3”，
“systemjs”:“0.19.40”，
“typescript”:“2.4.2”，
“zone.js”:“^ 0.8.16”
}，
“devDependencies”:{
“concurrently”:“^ 3.2.0”，
“lite-server”:“^ 2.2.2”，
“typescript”:“〜2.1.0”，
“canonical-path”:“0.0.2”，
“tslint”:“^ 3.15.1”，
“lodash”:“^ 4.16.4”，
“ Jasmine 芯”:“〜2.4.1”，
“业力”:“^ 1.3.0”，
“karma-chrome-launcher”:“^ 2.0.0”，
“karma-cli”:“^ 1.0.1”，
“业力 Jasmine ”:“^ 1.0.2”，
“karma-jasmine-html-reporter”:“^ 0.2.2”，
“Protractor ”:“〜4.0.14”，
“rimraf”:“^ 2.5.4”，
“@ types/node”:“^ 6.0.46”，
“@ types/ Jasmine ”:“2.5.36”
}，
“存储库”:{}
}

这是我的System.config.js
/**
* Angular示例的系统配置
*根据您的应用需求进行必要的调整。
*/
(功能(全局){
System.config({
路径:{
//路径用作别名
'npm:':'node_modules/'
}，
//map告诉System loader在哪里寻找东西
map : {
//我们的应用程序位于app文件夹中
'app':'app'，

//Angular 束
'@ angular/core':'npm:@ angular/core/bundles/core.umd.js'，
'@ angular/common':'npm:@ angular/common/bundles/common.umd.js'，
'@ angular/compiler':'npm:@ angular/compiler/bundles/compiler.umd.js'，
'@ angular/platform-b​​rowser':'npm:@ angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js'，
'@ angular/platform-b​​rowser-dynamic':'npm:@ angular/platform-b​​rowser-dynamic/bundles/platform-b​​rowser-dynamic.umd.js'，
'@ angular/http':'npm:@ angular/http/bundles/http.umd.js'，
'@ angular/router':'npm:@ angular/router/bundles/router.umd.js'，
'@ angular/forms':'npm:@ angular/forms/bundles/forms.umd.js'，

//其他库
'rxjs':'npm:rxjs'，
'angular-in-memory-web-api':'npm:angular-in-memory-web-api/'
}，
//软件包告诉系统加载程序在没有文件名和/或扩展名的情况下如何加载
套餐:{
应用程序: {
defaultExtension:'js'，
中继:{
'./*.js':{
加载程序:“systemjs-angular-loader.js”
}
}
}，
rxjs:{
defaultExtension:'js'
}
}
});
})(这);

在我安装HttpClientModule之前，代码工作正常。

从'@ angular/core'导入{NgModule};
从“@ angular/platform-b​​rowser”导入{BrowserModule}；

从'@ angular/common/http'导入{HttpClientModule};
从'./app.component'导入{AppComponent};

@NgModule({
进口:[
BrowserModule，
HttpClientModule]，
声明:[AppComponent]，
bootstrap :[AppComponent]
})
导出类AppModule {}

添加HttpClientModule后，出现错误:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http

我已经花了很长时间了，看了很多类似这样的问题，但是找不到我的问题的答案。

Answer 1

我怀疑您应该在systemjs配置中添加以下 key :

 map: {
  ...
  '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
  'tslib': 'npm:tslib/tslib.js'

Plunker Example
tslib是必需的，因为@angular/common/http依赖于它。 https://github.com/angular/common-builds/blob/4.3.0/bundles/common-http.umd.js#L7