zoukankan      html  css  js  c++  java
  • 解决Angular2 (SystemJS) XHR error (404 Not Found) loading traceur

    初学Angular2,跟着Angular2中文网学到HTTP这一节时出现了一个异常:

    GET http://localhost:3000/traceur 404 (Not Found)
    Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    	Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
    	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
    	    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
    	    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
    	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
    

    在Github的Issue中找到了答案:
    https://github.com/angular/angular/issues/11358

    最终解决方案如下:
    1、修改systemjs.config.js文件如下:(将angular-in-memory-web-api修改为angular2-in-memory-web-api)

    (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',
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          }
        }
      });
    })(this);
    

    2、修改package.json文件如下:(将angular-in-memory-web-api修改为angular2-in-memory-web-api)

    {
      "name": "angular2Demo",
      "version": "1.0.0",
      "scripts": {
        "start": "tsc && concurrently "tsc -w" "lite-server" ",
        "lite": "lite-server",
        "postinstall": "typings install",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "typings": "typings"
      },
      "licenses": [
        {
          "type": "MIT",
          "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
        }
      ],
      "dependencies": {
        "@angular/common": "~2.1.0",
        "@angular/compiler": "~2.1.0",
        "@angular/core": "~2.1.0",
        "@angular/forms": "~2.1.0",
        "@angular/http": "~2.1.0",
        "@angular/platform-browser": "~2.1.0",
        "@angular/platform-browser-dynamic": "~2.1.0",
        "@angular/router": "~3.1.0",
        "@angular/upgrade": "~2.1.0",
        "angular2-in-memory-web-api": "0.0.21",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.39",
        "zone.js": "^0.6.25"
      },
      "devDependencies": {
        "concurrently": "^3.0.0",
        "lite-server": "^2.2.2",
        "typescript": "^2.0.3",
        "typings":"^1.4.0"
      }
    }
    

    3、修改app.module.ts中InMemoryWebApiModule的导入方式)

    import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
    
  • 相关阅读:
    前端工程师必备的7个chrome插件
    树莓派 基于Web的温度计
    vue2.0 非父子组件如何通信
    newman
    mysql主从同步设置
    redis集群搭建
    服务器之间共享挂载
    Jenkins自动构建-部署-测试
    postman使用整理
    Charles使用
  • 原文地址:https://www.cnblogs.com/DoNetCoder/p/6002360.html
Copyright © 2011-2022 走看看