Ngx-datatable: cannot resolve directory "/node_modules/@swimlane/ngx-datatable/release/datatable.component.css"

[Shashidharyandigeri]

@import '/node_modules/@swimlane/ngx-datatable/release/datatable.component.css';
@import '/node_modules/@swimlane/ngx-datatable/release/material.css';
@import '/node_modules/@swimlane/ngx-datatable/release/assets/icons.css';

[PatrickHuetter]

I've the same problem with angular 2.4.4 and ngx-datatable 6.0.2: I created two demos for this. http://encircle360share.s3-eu-central-1.amazonaws.com/css-not-working.zip

[pixelsailor]

Are you using Angular CLI? I had to use relative paths to properly import the files into my scss.

[PatrickHuetter]

I'm using webpack and npm directly, no angular cli involved. Relative paths are also not working. Using an older version of angular (2.1) with the older ng2-datatable worked fine.
In the demo posted above i used angular-cli with absolute and also relative paths. There it also didn't work.

[arlowhite]

The documented paths aren't correct, add components/ to your path.
node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css

[PatrickHuetter]

@arlowhite This also doesn't help. I already evaluated the paths and fixed them. Also the IDE is able to resolve the path. It seems that these files don't get served by the internal webserver.

[amcdnl]

This is a packaging issue I'm working through right now. I can't find a good fix :(

[mburger81]

I use ionic2.0.1 with angular 2.2.1 and I'm able to include the css from the angular component doing like this
styleUrls: [ require('../../../node_modules/@swimlane/ngx-datatable/release/index.css') ]
or like this

import indexStyle  from '../../../node_modules/@swimlane/ngx-datatable/release/index.css';
styleUrls: [ indexStyle ]

On load the css I get an error

Error: Module parse failed: /home/michi/software/workspace/web-client-ionic/node_modules/@swimlane/ngx-datatable/release/index.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT
|  */
| .ngx-datatable {
|   display: block;
|   overflow: hidden;
    at Object.<anonymous> (http://localhost:8100/build/main.js:129939:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at http://localhost:8100/build/main.js:63890:25
    at Object.<anonymous> (http://localhost:8100/build/main.js:63896:2)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:93695:105)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:80311:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:129929:70)

So finally I'm able to load/find the file from node_module folder but get an error on parse the file.

If I copy the css and all fonts and the other files under the project assets folder I can import the css from the scss file, and it loads right and works. But there is another mistake
importing the icons.css file in my scss file I override the default icons, so after that in my app there strange icons, so I'm not able to encapsulate the icons for my component.

Some ideas?

[amcdnl]

This should be solved now :)

[GuofuHuang]

How is it solved?

[mburger81]

I have still the problem

[amcdnl]

You no longer need to import the css.

[mburger81]

EDIT:

I use your table in version 6.3.0 on an ionic2 project and I still need to import your css files.

So in my case the bug is still present.

[amcdnl]

You should only have to do the theme css, the base styles are auto.

[YoLoADR]

Do you have a .gitignore file ?