(SystemJS) Ошибка XHR @ angular / commobundles / common.umd.js / http не найден

Я делаю простой HTTP-запрос в своем приложении.

Я использую Angular 2 Quickstart и обновляю все свои пакеты angular до 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

Я занимаюсь этим довольно давно и рассмотрел довольно много подобных вопросов, но не могу найти ответа на свою проблему.


person Akshay Gupta    schedule 11.08.2017    source источник


Ответы (2)


Я подозреваю, что вам следует добавить в конфигурацию systemjs следующие ключи:

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

Пример Plunker

tslib требуется, потому что @angular/common/http зависит от него. https://github.com/angular/common-builds/blob/4.3.0/bundles/common-http.umd.js#L7

person yurzui    schedule 11.08.2017
comment
Это сработало. Раньше не думал об этом, просто думал, что это уже будет в быстром запуске. И я не знаю почему, но я не могу найти его в руководстве по angular или документации по API. - person Akshay Gupta; 11.08.2017
comment
Хм ... Я внес изменения, но по-прежнему получаю ту же ошибку. Нужно ли мне перезагружать файл systemjs? - person Saturn K; 29.12.2017
comment
Я тоже получаю ту же ошибку ... Если есть какое-то решение, скажите мне - person Mohammad Neamul Islam; 23.03.2021

Вы должны добавить map в конфигурацию systemjs @angular/common/http

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

Дополнительно требуется tslib

'tslib': 'npm:tslib/tslib.js'
person Pankaj Parkar    schedule 11.08.2017
comment
Я добавляю их в свой системный файл sonfig, но ошибка не решается - person Mohammad Neamul Islam; 23.03.2021