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

Posted 2023-03-07

【中文标题】(SystemJS) XHR 错误@angular/commobundles/common.umd.js/http 未找到

【英文标题】：(SystemJS) XHR error @angular/commobundles/common.umd.js/http not found

【发布时间】：2018-01-19 22:24:19

【问题描述】：

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

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

这是我的package.json

“名称”：“角度快速入门”， “版本”：“1.0.0”， "description": "文档中的快速入门 package.json，辅以测试支持", “脚本”： “构建”：“tsc -p src/”， "build:watch": "tsc -p src/ -w", “构建：e2e”：“tsc -p e2e/”， "服务": "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 运行构建：e2e”， "e2e": "同时\"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", "preprotractor": "webdriver-manager 更新", "量角器": "量角器 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 详细” , “关键字”：[]， “作者”： ””， “许可证”：“麻省理工学院”， “依赖”： "@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/路由器": "4.3.4", “angular-in-memory-web-api”：“~0.3.0”， "core-js": "^2.4.1", "rxjs": "^5.4.3", “systemjs”：“0.19.40”， “打字稿”：“2.4.2”， “zone.js”：“^0.8.16” , “开发依赖”： "同时": "^3.2.0", “精简服务器”：“^2.2.2”， “打字稿”：“~2.1.0”， “规范路径”：“0.0.2”， "tslint": "^3.15.1", "lodash": "^4.16.4", “茉莉花核”：“~2.4.1”， "业力": "^1.3.0", "karma-chrome-launcher": "^2.0.0", "业力-cli": "^1.0.1", “业力茉莉花”：“^1.0.2”， “karma-jasmine-html-reporter”：“^0.2.2”， “量角器”：“~4.0.14”， "rimraf": "^2.5.4", "@types/node": "^6.0.46", “@types/茉莉花”：“2.5.36” , “存储库”：

这是我的System.config.js

/** * Angular 示例的系统配置 * 根据您的应用需求进行调整。 */ （函数（全局） 系统配置（ 路径： // 路径作为别名 'npm:': 'node_modules/' , // map 告诉系统加载器在哪里寻找东西 地图： // 我们的应用在 app 文件夹中 “应用程序”：“应用程序”， // 角度束 '@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/' , // packages 告诉系统加载器在没有文件名和/或扩展名时如何加载 包： 应用程序： 默认扩展：'js'， 元： './*.js': 加载器：'systemjs-angular-loader.js' , rxjs： 默认扩展：'js' ); ）（这）;

在我安装 HttpClientModule 之前，代码运行良好。

从'@angular/core'导入 NgModule ； 从“@angular/platform-b​​rowser”导入 BrowserModule ； 从“@angular/common/http”导入 HttpClientModule ； 从'./app.component'导入AppComponent； @NgModule( 进口：[ 浏览器模块， HttpClientModule], 声明：[ AppComponent ]， 引导程序：[应用组件] ) 导出类 AppModule

添加HttpClientModule后，我得到一个错误：

错误：（SystemJS）XHR 错误（404 Not Found）正在加载 http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http

我已经做了很长一段时间了，看了很多这样的问题，但找不到我的问题的答案。

【参考方案1】：

我怀疑您应该将以下键添加到您的 systemjs 配置中：

 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

【讨论】：

成功了。之前没有想到这一点，只是认为它已经在快速入门中。而且我不知道为什么，但我在角度指南或 api 文档中找不到它。

嗯...我进行了更改，但仍然遇到相同的错误。我必须重新加载systemjs文件吗？

我也遇到同样的错误...如果有任何解决方案请告诉我

【参考方案2】：

你应该在systemjs配置中添加map@angular/common/http

'@angular/common/http': 'node_modules/@angular/common/bundles/common-http.umd.js'

另外需要tslib

'tslib': 'npm:tslib/tslib.js'

【讨论】：

我在我的系统sonfig中添加了这些但错误没有解决