Getting started example doesn't work. Error.

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 ]

[ajgraham671]

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

[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.