angular2和typescript錯誤

Question

我正在嘗試創建一個角度爲2的應用程序並使用hammerjs作爲觸摸手勢。 目前我正試圖將來自Angular 2的quickstarter應用程序與來自Hammerjs sample的hammerjs應用程序結合使用。

我不斷收到一個錯誤：

http://localhost:3000/npm:plugin-typescript@4.0.10/lib/plugin.js Failed to load resource: the server responded with a status of 404 (Not Found) 
localhost/:33 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/npm:plugin-typescript@4.0.10/lib/plugin.js 
Error: XHR error (404 Not Found) loading http://localhost:3000/npm:plugin-typescript@4.0.10/lib/plugin.js 
Error loading http://localhost:3000/npm:plugin-typescript@4.0.10/lib/plugin.js 
Unable to load transpiler to transpile http://localhost:3000/app/app.component.js 
Error loading http://localhost:3000/app/app.component.js 

我systemjs.config.js文件：

(function (global) { 
    System.config({ 
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER 
transpiler: 'ts', 
typescriptOptions: { 
    tsconfig: true 
}, 
meta: { 
    'typescript': { 
    "exports": "ts" 
    } 
}, 
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', 
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 

    // other libraries 
    'rxjs':      'npm:rxjs', 
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
    'ts':       'npm:plugin-typescript@4.0.10/lib/plugin.js', 
    'typescript':     'npm:typescript@2.0.2/lib/typescript.js', 

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

我的文件夾結構：

mypackage.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": "~2.4.0", 
    "@angular/compiler": "~2.4.0", 
    "@angular/core": "~2.4.0", 
    "@angular/forms": "~2.4.0", 
    "@angular/http": "~2.4.0", 
    "@angular/platform-browser": "~2.4.0", 
    "@angular/platform-browser-dynamic": "~2.4.0", 
    "@angular/router": "~3.4.0", 

    "angular-in-memory-web-api": "~0.2.4", 
    "systemjs": "0.19.40", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.7.4" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.2.0", 
    "lite-server": "^2.2.2", 
    "typescript": "~2.0.10", 

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

我安裝了所有的npm安裝模塊。

我錯過了什麼？

Answer 1

你可能需要這個（從ypeScript裝載機SystemJS的文檔）：如果你正在使用SystemJS沒有JSPM（您使用NPM），加SystemJS地圖配置插件，打字稿及打字稿：

SystemJS.config({ 
    packages: { 
    "ts": { 
     "main": "plugin.js" 
    }, 
    "typescript": { 
     "main": "lib/typescript.js", 
     "meta": { 
     "lib/typescript.js": { 
      "exports": "ts" 
     } 
     } 
    } 
    }, 
    map: { 
    "ts": "path/to/plugin-typescript/lib", 
    "typescript": "path/to/typescript" 
    }, 
    transpiler: 'ts' 
});