I'm getting the same problem... any solution?

HughProctor on 23 Apr 2017

I have same problem

"Template parse errors:
Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.
1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module.
2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (\"

jamespakorn on 24 Apr 2017

I too got the same problem

kalyandas on 24 Apr 2017

Actually I've found that this may not be a bug... check which Angular version your using..
in my package.json file ... I have version v2.4. something...
this is what you want to have...
"@angular/animations": "^4.0.3",
"@angular/common": "^4.0.3",
"@angular/compiler": "^4.0.3",
"@angular/compiler-cli": "^4.0.3",
"@angular/core": "^4.0.3",
"@angular/forms": "^4.0.3",
"@angular/http": "^4.0.3",

... but ... don't just copy and paste that into the package.json file... you should do the following commands, one after the other:
npm update -D
npm update -S

This will mess with any webpacks etc that you have... because Angular is a pain with dependencies all over the shop... but this is the coding world we live in.... so, I'd suggest creating a Tag backup of your whole UI project (via Github) before you make these changes.

HughProctor on 24 Apr 2017

I could fix the issue. May seem strange but it worked like this.
My app is multi-modular , I imported NgxDatatableModule in the root module and it was giving me the error.
I then imported it in the child module , it worked :-)

kalyandas on 24 Apr 2017

👍30 🎉14 🚀1 ❤1 👎1

I upgraded to a working Angular4x version, then added the control again and I get the same error.

Here is my package.json file

{

"name": "angular-webpack-visualstudio",

"version": "1.0.0",

"description": "An Angular VS template",

"main": "wwwroot/index.html",

"author": "",

"license": "ISC",

"repository": {

"type": "git",

"url": "https://github.com/damienbod/Angular2WebpackVisualStudio.git"

},

"scripts": {

"ngc": "ngc -p ./tsconfig-aot.json",

"start": "concurrently \"webpack-dev-server --hot --inline --port 8080\" \"dotnet run\" ",

"webpack-dev": "set NODE_ENV=development && webpack",

"webpack-production": "set NODE_ENV=production && webpack",

"build-dev": "npm run webpack-dev",

"build-production": "npm run ngc && npm run webpack-production",

"watch-webpack-dev": "set NODE_ENV=development && webpack --watch --color",

"watch-webpack-production": "npm run build-production --watch --color",

"publish-for-iis": "npm run build-production && dotnet publish -c Release",

"test": "karma start"

},

"dependencies": {

"@angular/animations": "^4.0.3",

"@angular/common": "^4.0.3",

"@angular/compiler": "^4.0.3",

"@angular/compiler-cli": "^4.0.3",

"@angular/core": "^4.0.3",

"@angular/forms": "^4.0.3",

"@angular/http": "^4.0.3",

"@angular/platform-browser": "4.0.2",

"@angular/platform-browser-dynamic": "4.0.2",

"@angular/platform-server": "4.0.2",

"@angular/router": "4.0.2",

"@angular/upgrade": "4.0.2",

"@swimlane/ngx-datatable": "^8.2.1",

"angular-in-memory-web-api": "0.3.1",

"bootstrap": "^3.3.7",

"core-js": "2.4.1",

"ie-shim": "~0.1.0",

"reflect-metadata": "0.1.10",

"rxjs": "5.3.0",

"zone.js": "0.8.5"

},

"devDependencies": {

"@types/node": "7.0.12",

"@types/jasmine": "2.5.46",

"angular2-template-loader": "0.6.2",

"angular-router-loader": "^0.6.0",

"awesome-typescript-loader": "3.1.2",

"clean-webpack-plugin": "^0.1.16",

"concurrently": "^3.4.0",

"copy-webpack-plugin": "^4.0.1",

"css-loader": "^0.28.0",

"file-loader": "^0.11.1",

"html-webpack-plugin": "^2.28.0",

"jquery": "^3.2.1",

"json-loader": "^0.5.4",

"node-sass": "^4.5.2",

"raw-loader": "^0.5.1",

"rimraf": "^2.6.1",

"sass-loader": "^6.0.3",

"source-map-loader": "^0.2.1",

"style-loader": "^0.16.1",

"ts-helpers": "^1.1.2",

"tslint": "^5.0.0",

"tslint-loader": "^3.5.2",

"typescript": "2.2.2",

"url-loader": "^0.5.8",

"webpack": "^2.3.3",

"webpack-dev-server": "2.4.2",

"jasmine-core": "2.5.2",

"karma": "1.6.0",

"karma-chrome-launcher": "2.0.0",

"karma-jasmine": "1.1.0",

"karma-sourcemap-loader": "0.3.7",

"karma-spec-reporter": "0.0.30",

"karma-webpack": "2.0.3"

},

"-vs-binding": {

"ProjectOpened": [

  "watch-webpack-dev"

]

}

From: kalyandas [mailto:[email protected]]
Sent: Monday, April 24, 2017 12:51 PM
To: swimlane/ngx-datatable
Cc: Ralph Krausse; Author
Subject: Re: [swimlane/ngx-datatable] Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'. (#698)

I could fix the issue. May seem strange but it worked like this.
My app is multi-modular , I imported NgxDatatableModule in the root module and it was giving me the error.
I then imported it in the child module , it worked :-)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/swimlane/ngx-datatable/issues/698#issuecomment-296739975 , or mute the thread https://github.com/notifications/unsubscribe-auth/AF0PA_iK2hfIP1a3uyOBpriuOpUIKNyWks5rzNLfgaJpZM4NESDu . https://github.com/notifications/beacon/AF0PA04DLz0pLVoliKdaelWYk4ymplRiks5rzNLfgaJpZM4NESDu.gif

gordingin on 25 Apr 2017

I get this issue only when running ng test. ng serve is fine for me.

I've tried on Angular 4.0.2 & 4.1.0

UPDATE: I forgot to add the ngx datatable module to my TestBed imports.

allanbond on 4 May 2017

Can someone make a demo showing this? I don't really have enough info to help at the moment.

amcdnl on 5 May 2017

Here you go Austin,

I am only a newby with ng2 and cannot seem to attach a zip to this ticket of example but to recreate this issue took only a few minutes as per the below steps.

Versions

$ npm --version
4.5.0

$ ng --version
@angular/cli: 1.0.0
node: 7.8.0
os: darwin x64

Create new project and test

$ ng new test-karma-error
…
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'test-karma-error' successfully created.

test-karma-error (master) $ ng test

11 05 2017 07:54:23.088:WARN [karma]: No captured browser, open http://localhost:9876/  
11 05 2017 07:54:23.109:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
11 05 2017 07:54:23.109:INFO [launcher]: Launching browser Chrome with unlimited concurrency
11 05 2017 07:54:23.136:INFO [launcher]: Starting browser Chrome
11 05 2017 07:54:24.103:INFO [Chrome 57.0.2987 (Mac OS X 10.12.4)]: Connected on socket pFV7Jo9v1QKv0O7_AAAA with id 92377930
Chrome 57.0.2987 (Mac OS X 10.12.4): Executed 3 of 3 SUCCESS (0.19 secs / 0.174 secs)

Install Swimlane ngx-datatable

test-karma-error (master) $ npm i @swimlane/ngx-datatable --save
[email protected] /Users/peter/test-karma-error
└── @swimlane/[email protected]

app.module.ts

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
imports: [
  …
  NgxDatatableModule,
],

app.component.html

<div>
  <ngx-datatable
    [rows]="rows"
    [columns]="columns">
  </ngx-datatable>
</div>

app.component.ts

  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
  ];
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];

#

Run it

test-karma-error (master) $ ng serve
** NG Live Development Server is running on http://localhost:4200 **
 11% building modules 15/26 modules 11 active ...de_modules/css-loader/lib/css-base.jswebpack: wait until bundle finished: /
Hash: 3c7c0f032a045d5629fa                                                              
Time: 8488ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 4.19 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.79 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Test it

test-karma-error (master) $ ng test
11 05 2017 08:02:27.455:WARN [karma]: No captured browser, open http://localhost:9876/  
11 05 2017 08:02:27.468:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
11 05 2017 08:02:27.468:INFO [launcher]: Launching browser Chrome with unlimited concurrency
11 05 2017 08:02:27.496:INFO [launcher]: Starting browser Chrome
11 05 2017 08:02:28.284:INFO [Chrome 57.0.2987 (Mac OS X 10.12.4)]: Connected on socket ZKXzp4OCJgCJruHAAAAA with id 89361783
Chrome 57.0.2987 (Mac OS X 10.12.4) AppComponent should create the app FAILED
    Can't bind to 'rows' since it isn't a known property of 'ngx-datatable'.
    1. If 'ngx-datatable' is an Angular component and it has 'rows' input, then verify that it is part of this module.
    2. If 'ngx-datatable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    <div>
      <ngx-datatable
        [ERROR ->][rows]="rows"
        [columns]="columns">
      </ngx-datatable>
    "): ng:///DynamicTestModule/AppComponent.html@6:4
…………..

Dropbox link
run an npm update

Hope this helps
Regards

PeterSawyer on 11 May 2017

👍4 ❤2

@PeterSawyer:

did you import NgxDatatableModule to your *.spec.ts?

describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent], imports: [ NgxDatatableModule ]

sac-cas on 11 May 2017

👍9 ❤3 🚀1

Yeah well that solved my issue thanks so simple in the end. Thanks @sacastells

PeterSawyer on 11 May 2017

Hi,

I was getting this error and it was due to my setup. I had done everything in getting started guide but still was getting this error. The component where I was adding the code had is own module ts file and once I add the NgxDatatableModule to that module file as well it started working.

If your components have there own module files you will need to add the NgxDatatableModule import statement into that file as well.

Regards,
Colin

just2evil on 24 Jul 2017

👍6

I'm having the same issue as described by @gordingin using an Angular 4.1.2 app generated by the SpaTemplates mentioned above (via 'dotnet new angular' in command line (Windows 10)), with version 10.0.5 of ngx-datatable. I'm not using tests though, so it's not the same fix.

I can add it to one of my templates, and it works until I refresh the page. I then have to comment out the ngx-datatable directive and refresh the page. Once I've done that I can uncomment the ngx-datatable directive and it will show up (using HMR).

@amcdnl I could generate a new app using MS's template and throw it on Github if that would help. You would need .NET Core and such to run it though. Running the 'dotnet new angular' command basically generates a .NET Core MVC web app with an Angular app hooked up within it with HMR/prerendering ready to go out the gate.

Here's the code to repro the issue:
https://github.com/FreezingCode/ngx-datatable-example

~~I'm working on getting an example on Azure.~~ Scratch that. My free trial is gone.

FreezingCode on 14 Aug 2017

I get passed that issue by writing [attr.rows]="rows" instead of just [rows]
though, my error is Error: Template parse errors: 'ngx-datatable' is not a known element

AhmedHamedTN on 7 Sep 2017

👍1

ES->Tuve el mismo error. Solucionado importando el módulo en cada uno de los módulos hijos de la aplicación como sugería @kalyandas
EN-> I had the same error. Advice of @kalyandas worked for me. Thanks.

fcm1092 on 19 Oct 2017

👍1

getting the same error when using Angular 5

gandarez on 7 Dec 2017

My solution in comment: https://github.com/swimlane/ngx-datatable/issues/698#issuecomment-296739975
With Ng5. - it works!

Thanks, @kalyandas (Y)

1antares1 on 11 Dec 2017

😄1

Hi everybody. I got the same error but I imported 'NgxDatatableModule' in child module and I was getting error. Then I imported 'NgxDatatableModule' in root module and It works.
It's very confused however I'm programming on Ionic v.3.
Thanks @kalyandas your comment was a good reference for my solution.

aldaircc on 4 Dec 2018

i got the same error, even i'm using Angular 9.0.5 and ngx-datatable version : 17.0.0 i tested all solutions in this page and in the first 10 pages on google but no result.
this is Link of Error image