Ngx-datatable: Getting started example doesn't work. Error.

[mikkoh85]

I'm submitting a ... (check one with "x")

[ X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

When following getting started from
https://swimlane.gitbooks.io/ngx-datatable/introduction/getting-started.html
, adding NgxDatatableModule to App module and then adding this kind of html to App component:

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

, it shows up, but there is absolutely no style or shape. All the array items (columns and rows) are listed in a single row.

And when i try to add that same html to some other component than App component and those arrays to that components .ts file, it breaks the whole app, giving error like this on browser:

EXCEPTION: Uncaught (in promise): TypeError: Cannot set property 'stack' of undefined TypeError: Cannot set property 'stack' of undefined at SyntaxError.set [as stack] (http://localhost:4200/vendor.bundle.js:88037:61) ...

I have tried with ngx-datatable 5.0.0 and 4.2.0. I have tried many kinds of things like importing to component, moving style files (material.css, datatable.css), etc. Not working, no solutions.

Expected behavior

It is said to work out of the box.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Windows 10 64-bit,
Chrome Version: 55.0.2883.87 m (64-bit),
Node v: 6.9.1,
Npm v: 3.10.9

My package.json:

{
"name": "material-test",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/*/.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.3",
"@angular/compiler": "2.4.3",
"@angular/core": "2.4.3",
"@angular/forms": "2.4.3",
"@angular/http": "2.4.3",
"@angular/material": "latest",
"@angular/platform-browser": "2.4.3",
"@angular/platform-browser-dynamic": "2.4.3",
"@angular/router": "3.4.3",
"@swimlane/ngx-datatable": "^5.0.0",
"angular2-google-chart": "latest",
"core-js": "^2.4.1",
"hammerjs": "latest",
"rxjs": "5.0.3",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.5"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.3",
"@types/jasmine": "2.5.40",
"@types/node": "^7.0.0",
"@types/socket.io-client": "^1.4.29",
"angular-cli": "1.0.0-beta.25.5",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"karma": "1.4.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.4.0",
"protractor": "5.0.0",
"ts-node": "2.0.0",
"tslint": "^4.0.0",
"typescript": "~2.1.5",
"webdriver-manager": "11.1.1"
}
}

• Table version: ^5.0.0, 4.2.0
  

• Angular version: 2.4.3
  

• Browser: [ Chrome 55.0.2883.87 m (64-bit) ]
  

• Language: [ TypeScript ]

[amcdnl]

Please make a demo plunkr

[mikkoh85]

Well, ok i'll try. I have never done that.

[mikkoh85]

Here is the Plunker demo I created. The first problem, styling is missing, is here too, but putting ngx-datatable html to another component than app.component doesn't crash the app like it does with my project. Of course the plunker demo isn't the latest angular version. I made mine with Angular Cli. I gotta do more testing I think..

https://embed.plnkr.co/FyHyFl33dhkprx6rEVHv/

[woodrufs]

I am having the same issue. I know the documentation says that you need to include the base styling, but I am unsure on how to do that with webpack. I'll update my response if I figure it out.

[jh-code]

@mikkoh85 I'm not seeing the datatable.css file imported anywhere in your plunkr. I created a new file datatable.css, pasted the datatable styles into it, and then imported it in the main stylesheet with @import './datatable.css'; and it's working fine.

[mikkoh85]

I guess I missed the part mentioning the base styling, so I didn't include it anyhow. I am using webpack too. I already built my own datatable component, so this is not an issue for me anymore. But thanks for help.

[amcdnl]

I'm going to be including the base styles by default in the next release.

[zaszlo]

The table loads in but without styling.

I'm having difficulties with this as well: I have just added the mentioned imports to my scss file and then specified the class of my ngx-datatable to <ngx-datatable class="material">.
I'm a newbie, had to google up on how to include a scss, did the following:

• in my app.component.ts file changed a line: styleUrls: ['./app.component.scss']
• created the app.component.scss file with the imports listed on the getting started themeing part.
• installed some packages that I thought should enable the scss to work: npm install -save style-loader sass-loader postcss-loader node-sass css-loadernpm install -save style-loader sass-loader postcss-loader node-sass css-loader

I get 404 errors for my css GET calls, like:
http://localhost:4200/node_modules/@swimlane/ngx-datatable/release/assets/icons.css
Have checked the links and I have those css files in place, except for the datatable.component.css that is under a components directory. Tried to add . or .. before the import's absolute paths to no avail.
I get the styling only by copying the css files into my app directory.
Please provide more details on this to get started.

My project is based on angular 2.3.1, on pluncker there is only version 2 so the structure is different, don't see an option to upload whole folder.
Having a link with the working demo git repo is always helpful.

[dkijkuit]

I can confirm identical behavior described by z--aszlo, any solutions?

[amcdnl]

Ya, I'm working on this still :( ... I have yet to find suitable approach.

Issue is the AoT builds errors when ran through webpack so I have to run them manually outside thus not getting the correct compilation for the css ( which is odd cuz it generates a css compilation file for AoT ).

I think the best fix might be getting webpack to run the AoT.

[amcdnl]

CSS issue should be fixed now.

[ajgraham671]

I'm still having this issue with the latest release. Not sure what I'm doing incorrectly.