Angular2 - not able to add component from npm

Question

I just downloaded angular component from npmjs called ng2-easy-table (I am creator of this component, so maybe I did some mistake creating it).

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

Then I created simple app.component.ts to add ng2-easy-table directive.

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, []);

In the node_modules it looks like below:

And System.config

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

But when I start the app npm start, from the console I am getting:

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(…)

EDIT

After adding Config.style provided by @Thierry Templier I am getting:

@EricMartinez done, am I right I should add to system.config something like paths: { 'ng2-easy-table/': 'node_modules/ng2-easy-table/' } ? — ssuperczynski
– ssuperczynski, Commented Apr 3, 2016 at 13:33

Thierry Templier · Accepted Answer · 2016-04-03 16:15:46Z

1

You need to add a map block for the library in your configuration of 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));

edited Apr 3, 2016 at 16:15

answered Apr 3, 2016 at 14:22

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ssuperczynski Over a year ago

I edited my question. Now I am getting http://localhost:3000/node_modules/ng2-easy-table/app/app.component 404 (Not Found)

Thierry Templier Over a year ago

You could add an entry into the packages block of your systemjs configuration. I updated my answer...

Collectives™ on Stack Overflow

Angular2 - not able to add component from npm

EDIT

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related