Can't bind to 'ng-grid' since it isn't a known native property

[Ajeey]

system.conf.js -

var map = {
        'app': 'src/tmp/app',
        'angular2-grid': 'node_modules/angular2-grid/dist',
        'test': 'src/tmp/test'
  };

var packages = {
        'app': {
            defaultExtension: 'js'
        },
        'test': {
            defaultExtension: 'js'
        },
        'rxjs': {
            defaultExtension: 'js'
        },
        'angular2-grid': { main: 'main.js',  defaultExtension: 'js' }
    };

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

And my component file as -

import { NgGrid, NgGridItem } from 'angular2-grid';

@Component({
    selector: 'as-home',
    templateUrl: 'app/home/home.html',
    styleUrls: [
        'app/home/home.css'
    ],
    providers: [GithubSearchService],
    directives: [NgGrid, NgGridItem]
})

I am using

"@angular/core": "2.0.0-rc.4"

What am I missing?

[wuhkuh]

Why aren't you mapping 'angular2-grid': 'node_modules/angular2-grid/dist', in your src/tmp folder like 'app': 'src/tmp/app'? This looks like a build issue, because: "exclude": [ "node_modules" ]

[BTMorton]

Hey @Ajeey,

Is it definitely saying can't bind to ng-grid? Meaning your HTML looks something like:

<div [ng-grid]="gridOptions"></div>

If that's the case it's a simple fix. The selector is actually ngGrid, so just update your HTML to say that like so:

<div [ngGrid]="gridOptions"></div>

If that's not the issue, then it would seem there is something wrong in your build pipeline and I'd need more information, from you about how it's built and served. I'm going to assume you have a file structure similar to this?

root
| - index.html
| - src
|   | - tmp
| - node_modules