Support for Angular 16.x

[zamadaouf]

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

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Expected behavior

Reproduction of the problem

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

Please tell us about your environment:

• Table version:

• Angular version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

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

[mhamri]

the ngx-table isn't working with angular 16.2.0

in style.scss

@use '@swimlane/ngx-datatable/index.css';

@use '@swimlane/ngx-datatable/themes/material.css';
@use '@swimlane/ngx-datatable/assets/icons.css';

it produces this error:

./apps/module-desktop/src/styles.scss - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
3 │ @use '@swimlane/ngx-datatable/index';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  apps\module-desktop\src\styles.scss 3:1  root stylesheet

./apps/module-desktop/src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./index.css is not exported from package C:\repo\App\frontend\node_modules\@swimlane\ngx-datatable (see exports field in C:\repo\App\frontend\node_modules\@swimlane\ngx-datatable\package.json)

[supremeqwert]

Workaround: Put the styles path directly to node_modules in global.scss:
@import '../node_modules/@swimlane/ngx-datatable/index.css'; @import '../node_modules/@swimlane/ngx-datatable/themes/material.css'; @import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';

[jaws97]

1. If 'ngx-datatable-column' is an Angular component and it has 'width' input, then verify that it is part of this module.
2. If 'ngx-datatable-column' 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.

I'm getting this error with Material 16 and Angular 16, any work around for this ?

My Package.json

    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.12",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^16.2.12",
    "@angular/material": "^16.2.12",
    "@angular/material-moment-adapter": "^16.2.12",
    "@angular/platform-browser": "^16.2.12",
    "@swimlane/ngx-charts": "^20.1.0",
    "@swimlane/ngx-datatable": "^20.1.0",

[thatcort]

Workaround: Put the styles path directly to node_modules in global.scss: @import '../node_modules/@swimlane/ngx-datatable/index.css'; @import '../node_modules/@swimlane/ngx-datatable/themes/material.css'; @import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';

This didn't work for me

[Abadii]

1. If 'ngx-datatable-column' is an Angular component and it has 'width' input, then verify that it is part of this module.
2. If 'ngx-datatable-column' 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.

I'm getting this error with Material 16 and Angular 16, any work around for this ?

My Package.json

    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.12",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^16.2.12",
    "@angular/material": "^16.2.12",
    "@angular/material-moment-adapter": "^16.2.12",
    "@angular/platform-browser": "^16.2.12",
    "@swimlane/ngx-charts": "^20.1.0",
    "@swimlane/ngx-datatable": "^20.1.0",

I had the same error after upgrading to Angular 16

I my case, the problem was the angular modules that I imported from other external packages. Go trough app.module.ts to all imported modules you use, and check if there is an error within those files. If so, try to upgrade all the external modules you use.

This error has nothing to do with the ngx-datatable, but rather other modules you import which makes all the modules broken and thus the ngx-datatable could not be resolved.

[Abadii]

Workaround: Put the styles path directly to node_modules in global.scss: @import '../node_modules/@swimlane/ngx-datatable/index.css'; @import '../node_modules/@swimlane/ngx-datatable/themes/material.css'; @import '../node_modules/@swimlane/ngx-datatable/assets/icons.css';

This didn't work for me

Maybe too obvious, but to ensure the correct import of the .scss file, it's important to understand the relative paths in your project's directory structure:

If your style.scss file is located in the src directory, you should use the following import statement:

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

In this case, ../ signifies moving up one directory level to reach the project's root, and then navigating to the desired node_modules directory.

However, if your scss file is located in a deeper folder, such as src/css, you'll need to adjust the import statement accordingly. Here's how it should look:

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

In this example, we've used ../../ to move up two directory levels to reach the project's root, and then proceeded to the node_modules directory.