首页 文章

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

提问于
浏览
4

我在我的应用程序中发出一个简单的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 后,我收到一个错误:

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

我已经参与了很长一段时间,看了很多这样的问题,但找不到我的问题的答案 .

2 回答

  • 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

  • 13

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

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

    另外它需要 tslib

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

相关问题