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

Question

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

我正在使用Angular 2 Quickstart并将所有Angular软件包更新为4.3。4.

这是我的软件包。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": {}
    }

这是我的系统。配置。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);

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

    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后，我得到一个错误：

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

Answer 1

您应该添加map在System js配置@角/通用/超文本传输协议

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

另外它需要tslb

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

Answer 2

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

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

普朗克例子

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