(SystemJS) XHR error @angular/commobundles/common.umd.js/http not found

Question

I am making a simple http request in my application.

I am using Angular 2 Quickstart and updating all my angular packages to 4.3.4

This is my 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": {}
    }

Here is my 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);

The code works fine until i install 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 { }

After i add HttpClientModule, i get an error:

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

I have been at it for quite a while and looked at quite a lot of questions like this but can't find an answer for my problem.

Answer 1

I suspect you should add the following keys to your systemjs configuration:

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

Plunker Example

tslib is required because @angular/common/http depends on it. https://github.com/angular/common-builds/blob/4.3.0/bundles/common-http.umd.js#L7

Answer 2

You should add map in systemjs configuration @angular/common/http

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

Additionally It requires tslib

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