（SystemJS）XHR错误@ angular/commobundles/common.umd.js/http找不到

Question

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

我使用Angular 2 Quickstart和更新我的所有角包4.3.4

这是我package.json

 

    { 
     "name": "angular-quickstart", 
     "version": "1.0.0", 
     "description": "QuickStart package.json from the documentation, supplemented with testing support", 
     "scripts": { 
     "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": "concurrently \"npm run build:watch\" \"npm run serve\"", 
     "pree2e": "npm run build:e2e", 
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 
     "preprotractor": "webdriver-manager update", 
     "protractor": "protractor protractor.config.js", 
     "pretest": "npm run build", 
     "test": "concurrently \"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" 
     }, 
     "keywords": [], 
     "author": "", 
     "license": "MIT", 
     "dependencies": { 
     "@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-browser": "4.3.4", 
     "@angular/platform-browser-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-core": "~2.4.1", 
     "karma": "^1.3.0", 
     "karma-chrome-launcher": "^2.0.0", 
     "karma-cli": "^1.0.1", 
     "karma-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" 
     }, 
     "repository": {} 
    } 

这里是我的System.config.js

 

    /** 
    * System configuration for Angular samples 
    * Adjust as necessary for your application needs. 
    */ 
    (function (global) { 
     System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      'app': 'app', 

      // angular bundles 
      '@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-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-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', 

      // other libraries 
      'rxjs':      'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
      defaultExtension: 'js', 
      meta: { 
       './*.js': { 
       loader: 'systemjs-angular-loader.js' 
       } 
      } 
      }, 
      rxjs: { 
      defaultExtension: 'js' 
      } 
     } 
     }); 
    })(this); 

的代码工作正常，直到我安装HttpClientModule。

 

    import { NgModule }  from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 

    import { HttpClientModule } from '@angular/common/http'; 
    import { AppComponent } from './app.component'; 


    @NgModule({ 
     imports: [ 
     BrowserModule, 
     HttpClientModule], 
     declarations: [ AppComponent ], 
     bootstrap: [ AppComponent ] 
    }) 
    export class 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配置：

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

Answer 2

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

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

此外它需要tslib

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