Less file error with angular 15

[IbrahimAlhaj9]

Hello Everyone, I got this error when build the project:

./node_modules/x-data-spreadsheet/src/index.less?ngGlobalStyle:1:5 - Error: Module parse failed: Unexpected token (1:5)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/node_modules/less-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> body {
|   margin: 0;
| }

angular.json:

 "styles": [
              "src/custom-theme.scss",
              "src/styles.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ,
              "node_modules/x-data-spreadsheet/src/index.less"
          ],

Package.json:

"dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "^15.1.2",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^15.0.0",
    "@angular/material": "^15.1.2",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@fortawesome/fontawesome-free": "^6.4.0",
    "highcharts": "^10.3.3",
    "highcharts-angular": "^3.0.0",
    "jest-editor-support": "*",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "x-data-spreadsheet": "^1.1.9",
    "xlsx": "^0.18.5",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.8",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "css-loader": "^6.8.1",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "style-loader": "^3.3.3",
    "typescript": "~4.8.2"
  }

Any idea how I can resolve this issue?
Thank you in advance.

[IbrahimAlhaj9]

@ourai , @apnerve , @andreykyz , @styfle Please any help with this issue?
Thanks in advance

[Apee]

I used the CDN approach an import the dist files in the projet.
In angular.json
"styles":[...,"node_modules/x-data-spreadsheet/dist/xspreadsheet.css"], "scripts": [...,"node_modules/x-data-spreadsheet/dist/xspreadsheet.js"]

and then load the tables like this in the components:
const s: any = x_spreadsheet("tableId")

you might have to include this right after you imports in your component file this to declare the x_spreadsheet function
declare var x_spreadsheet: any;