Error: Module parse failed: Unexpected token (7:0)-angular

[GustavoZatorre]

good afternoon, I need to make a basic grid with pqrid, and it doesn't show me data
thank you so much
app.component.ts
import { Component, OnInit } from '@angular/core';

import pq from 'pqgrid';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {

ngOnInit(): void {

//or array of objects
var dataSales = [
  { rank: 1, company: 'Exxon Mobil', revenues: '339,938.0', profits: '36,130.0' },
  { rank: 2, company: 'Wal-Mart Stores', revenues: '315,654.0', profits: '11,231.0' }];
//Initialize pqGrid with data.
pq.grid('app-root', { dataModel: { data: dataSales } });

}

title = 'web-portal';

}

app.component.html

angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"web-portal": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/web-portal",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"./node_modules/jquery-ui-pack/jquery-ui.css"

        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js"
        ]
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "62kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true,
          "aot": false
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "web-portal:build:production"
        },
        "development": {
          "browserTarget": "web-portal:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "web-portal:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "polyfills": [
          "zone.js",
          "zone.js/testing"
        ],
        "tsConfig": "tsconfig.spec.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      }
    }
  }
}

},
"cli": {
"analytics": false
}
}

package.json
{
"name": "web-portal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"jquery": "^3.7.0",
"pqgrid": "^9.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.3",
"@angular/cli": "~16.0.3",
"@angular/compiler-cli": "^16.0.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~5.0.2"
}
}
when making ng serve -o showed me

./node_modules/jquery-ui-pack/jquery-ui.css:7:0 - Error: Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * Copyright jQuery Foundation and other contributors; Licensed MIT */
|

.ui-draggable-handle {
| -ms-touch-action: none;
| touch-action: none;

./node_modules/jquery-ui-pack/jquery-ui.structure.css:11:0 - Error: Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * http://api.jqueryui.com/category/theming/
| */

.ui-draggable-handle {
| -ms-touch-action: none;
| touch-action: none;

./node_modules/jquery-ui-pack/jquery-ui.theme.css:17:0 - Error: Module parse failed: Unexpected token (17:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

/* Component containers
front.zip
------*/

.ui-widget {
| font-family: Arial,Helvetica,sans-serif;
| font-size: 1em;

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, note that we will not be able to act on a description involving a large framework; this needs to be first fleshed out on an outside forum like Stack Overflow.

[mgol]

Closing as it doesn’t seem we’ll get anywhere here.