Ngx-datatable: 6.0.0 breaks AoT: datatable.component.scss not found

[achimha]

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
AOT build using angular-cli beta 26 fails:

ERROR in ENOENT: no such file or directory, open '/foo/frontend/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.scss'

Expected behavior

Reproduction of the problem

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

Please tell us about your environment:

• Table version: 0.7.x
  6.0.0

• Angular version: 2.0.x
  2.4.5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.
  n/a

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript 2.1.4

[gerhardboer]

+1
I've got the same issue

[elvisbegovic]

same issue

[amcdnl]

Are you manually including that file? You shouldn't have to now.

[achimha]

I never included that file manually. As a workaround I copied it to the components directory and now AoT works. I do not know why it ends up in the parent directory, it is correctly referenced to in the component with its relative path.

[vaseapopa]

+1
same issue

[amcdnl]

I'm working on a fix now

[amcdnl]

Is this only breaking in AoT? I'm not hitting this but I'm almost not running AoT.

[elvisbegovic]

Aot only

[achimha]

If you need some test feedback on a PR, let us know!

[maxl13]

+1
Same issue

[amcdnl]

Anyone have any ideas how to fix this? I converted it to the styleUrls to literally help with this (lol).

[gregbown]

+1
Same issue in AOT compile. Copied file to release branch.
An alternate hack is changing /release/components/datatable.component.ts line 817 to point at the compiled css one directory up
styleUrls: ['../datatable.component.css'],

[amcdnl]

I see this file getting built? Is that not it? -> https://github.com/swimlane/ngx-datatable/blob/master/release/components/datatable.component.scss.ngstyle.ts

[amcdnl]

Fixed in 6.0.1

[achimha]

Unfortunately this doesn't fix the issue.

$ node_modules/.bin/ng build --aot
Hash: d62e3fb109fef7d2f5d2
Time: 35039ms
chunk    {0} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 249 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 45 kB {3} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 64.1 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 1.7 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in ENOENT: no such file or directory, open '/foo/frontend/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.scss'

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/foo/frontend/src'
 @ ./src/main.ts 11:0-74
 @ multi ./src/main.ts

ERROR in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
Module not found: Error: Can't resolve '/foo/frontend/src/$$_gendir' in '/foo/frontend/node_modules/@angular/core/src/linker'
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 71:15-36 87:15-102
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi ./src/main.ts

You can reproduce it by creating an sample angular-cli project and import the module.

[smoke]

I can also confirm the issue is not fixed yet.

I have even prepared a sample setup here https://github.com/smoke/ngx-datatable-aot-issue you can just execute ng build -aot -prod to reproduce the issue.

Hope this helps fixing the issue sooner.

====

On a side note, you should correct the path in https://github.com/swimlane/ngx-datatable/blob/master/docs/introduction/themes.md
Change:

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

->

@import '/node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css';

[amcdnl]

Thanks looking into this today!

[amcdnl]

Please retest. I made a temp fix to move the scss for now.

[smoke]

I confirm, the fix seems to be working.

If anyone else wants to take a look, I have updated the repo https://github.com/smoke/ngx-datatable-aot-issue

[olaf89]

Im trying to build aot version 6.0.2 result:
Module parse failed: @swimlane\ngx-datatable\release\components\datatable.component.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .ngx-datatable {
| display: block;
| overflow:hidden;:
SyntaxError: Unexpected token (1:0)

Im using webpack, In my project im using less, do I need also scss loader to use this library?

[amcdnl]

Ya, thats the side effect of that hack. I thought that might happen.

I'm still investigating the best way to do this without it being even more hacky...

[xtianus79]

@amcdnl I am having the same issue with Angular 4.0.3 and version 2.3.0 typscript

[sh977218]

Is this issue fixed? I'm still having same problem on 6.3.0 release with angular 2.4.10.

[amcdnl]

@sh977218 can you upgrade to latest and test?

@xtianus79 can you post the error?

[kabilya]

I am having the same problem with 10.0.5 building AOT. Here is the error:

Child node_modules\@swimlane\ngx-datatable\release\components\datatable.component.css:
1 module

ERROR in ./node_modules/@swimlane/ngx-datatable/release/components/datatable.component.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (node_modules\extract-text-webpack-plugin\loader.js:26:9)

[amcdnl]

You are getting this in your project?

[xtianus79]

@amcdnl post the error?

[braino15]

Any update on this?
I am using angular 4.1.0 & typescript 2.3.2 for datatable version 9.1.0.
Getting below error while trying to run build in AOT mode

_ERROR in Child compilation failed:
Module parse failed: \node_modules\@swimlane\ngx-datatable\release\components\datatable.component.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .ngx-datatable {
| display: block;
| overflow: hidden;:
SyntaxError: Unexpected token (1:0)_

For AOT, webpack config for parsing is
{
test: /.css$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test: /.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
},

[we125182]

@kabilya do you have solved this problem? i met the same one too.

thank you for any suggestions!

[werts]

@kabilya @we125182 something new about this problem?

[rocketkittens]

I am also experiencing this issue using WebPack, scss and css excluding node_modules from loaders..

[kabilya]

@we125182 @werts I abandoned this library last year due to its issue with AOT. I tried it again this year as it has currently have more features/functions than Material's MatTable.. I downloaded the entire source code from their repo and just included the entire ./src folder in my project.

import { NgxDatatableModule } from './ngx-datatable/index';

It's building now with my Angular 4.x project both in dev and production.
I don't know what's causing it, could be the combination of webpack and ExtractTextPlugin.
I tried different configuration and even used the extracttextplugin used by this library but to no avail.

Hope this helps.

[blandialcani]

In my case I resolved the issue by simply removing module import statement.
Now it works, and compiles with AoT.
For reference I am using version 9.3.1 of ngx-datatable, and angular cli 1.4.4.

[lucagouty]

Kinda same issue here, but it's actually JIT only, AOT works great (though, a while ago, it was the exact opposite 🙄).

"@swimlane/ngx-datatable": "^11.3.0",
"@angular/core": "^5.2.0",
"@angular/cli": "~1.7.4",

(i tried many ngx-datatable versions, and it all started after upgrading to angular 5 I think)

I end up with error at runtime : Failed to load datatable.component.css

I fixed it using webpack :

  new CopyWebpackPlugin([
    { context: 'src', to: '', from: { glob: 'assets/**/*', dot: true } },
    { context: 'src', to: '', from: { glob: 'favicon.ico', dot: true } },
    { context: 'node_modules/@swimlane/ngx-datatable/release/components', to: '', from: { glob: 'datatable.component.css', dot: true } },
  ], { ... }),

Though, using angular-cli I did not find any way to fix it.

There's many issues (opened or closed) about datatable.component.css, and I personally struggled more than once with it (always after upgrading some packages). I tried to have a look, but I really can't find the issue :(