Angular2 - 无法从npm添加组件

Question

我刚刚从npmjs下载了一个名为ng2-easy-table的角度组件（我是这个组件的创建者，所以也许我在创建它时犯了一些错误）。

的package.json

{ 
    "name": "untitled", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run styles\" ", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "typings": "typings" 
    }, 
    "dependencies": { 
    "angular2": "2.0.0-beta.13", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.35.0", 
    "ng2-easy-table": "0.0.12", 
    "node-sass": "^3.4.2", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "systemjs": "0.19.24", 
    "zone.js": "^0.6.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.1.0", 
    "typescript": "^1.8.7", 
    "typings": "^0.7.5" 
    }, 
    "author": "", 
    "license": "ISC" 
} 

然后创建简单app.component.ts添加ng2-easy-table指令。

app.component.ts

import {Component} from 'angular2/core'; 

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from 'ng2-easy-table/app/app.component'; 

@Component({ 
    selector: 'app', 
    templateUrl: 'app/index.html', 
    directives: [AppComponent] 
}) 

export class IndexComponent { } 

bootstrap(IndexComponent, []); 

在node_modules它看起来象下面这样：

而且System.config

<script> 
    System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('app/app.component') 
      .then(null, console.error.bind(console)); 
</script> 

但是，当我开始应用程序npm start，从控制台我得到：

GET http://localhost:3002/ng2-easy-table/app/app.component 404 (Not Found)

Error: XHR error (404 Not Found) loading http://localhost:3002/ng2-easy-table/app/app.component (…)

编辑

加入Config.style提供由@Thierry TEMPLIER我收到后：

Answer 1

您需要添加用于SystemJS配置中库的映射块：

<script> 
    System.config({ 
     map: { 
      'ng2-easy-table': 'node_modules/ng2-easy-table' 
     }, 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      }, 
      'ng2-easy-table': { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('app/app.component') 
      .then(null, console.error.bind(console));