p-chart: angular 17 chart.js integration errors

[drbenn]

Describe the bug

Adding chart.js to now default Angular 17 project with standalone components and SSR according to PrimeNG documentation causes errors. I was thinking it was something akin to errors I was receiving while adding NGXS implementation with Angular 17, having to do with SSR and requiring the providers in app.config.ts and app.config.server.ts because the server is not providing what the client is expecting?

I also installed npm i @types/chart.js

Adding the following to angular.json causes an app breaking error in the browser

"scripts": [
    "../node_modules/chart.js/dist/chart.js",

Receiving the following error

[plugin:vite:import-analysis] Failed to resolve import "./chunks/helpers.segment.js" from ".angular/vite-root/ui/scripts.js". Does the file exist?

angular:script/global:scripts.js:7:2099

5  |   * Released under the MIT License
6  |   */
7  |  import { r as requestAnimFrame, a as resolve, e as effects, c as color, i as isObject, d as defaults, b as isArray, v as valueOrDefault, u as unlistenArrayEvents, l as listenArrayEvents, f as resolveObjectKey, g as isNumberFinite, h as defined, s as sign, j as createContext, k as isNullOrUndef, _ as _arrayUnique, t as toRadians, m as toPercentage, n as toDimension, T as TAU, o as formatNumber, p as _angleBetween, H as HALF_PI, P as PI, q as _getStartAndCountOfVisiblePoints, w as _scaleRangesChanged, x as isNumber, y as _parseObjectDataRadialScale, z as getRelativePosition, A as _rlookupByKey, B as _lookupByKey, C as _isPointInArea, D as getAngleFromPoint, E as toPadding, F as each, G as getMaximumSize, I as _getParentNode, J as readUsedSize, K as supportsEventListenerOptions, L as throttled, M as _isDomSupported, N as _factorize, O as finiteOrDefault, Q as callback, R as _addGrace, S as _limitValue, U as toDegrees, V as _measureText, W as _int16Range, X as _alignPixel, Y as clipArea, Z as renderText, $ as unclipArea, a0 as toFont, a1 as _toLeftRightCenter, a2 as _alignStartEnd, a3 as overrides, a4 as merge, a5 as _capitalize, a6 as descriptors, a7 as isFunction, a8 as _attachContext, a9 as _createResolver, aa as _descriptors, ab as mergeIf, ac as uid, ad as debounce, ae as retinaScale, af as clearCanvas, ag as setsEqual, ah as _elementsEqual, ai as _isClickEvent, aj as _isBetween, ak as _readValueToProps, al as _updateBezierControlPoints, am as _computeSegments, an as _boundSegments, ao as _steppedInterpolation, ap as _bezierInterpolation, aq as _pointInLine, ar as _steppedLineTo, as as _bezierCurveTo, at as drawPoint, au as addRoundedRectPath, av as toTRBL, aw as toTRBLCorners, ax as _boundSegment, ay as _normalizeAngle, az as getRtlAdapter, aA as overrideTextDirection, aB as _textX, aC as restoreTextDirection, aD as drawPointLegend, aE as distanceBetweenPoints, aF as noop, aG as _setMinAndMaxByKey, aH as niceNum, aI as almostWhole, aJ as almostEquals, aK as _decimalPlaces, aL as Ticks, aM as log10, aN as _longestText, aO as _filterBetween, aP as _lookup } from "./chunks/helpers.segment.js";
   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ^
8  |  import "@kurkle/color";
9  |  class Animator {

Upon changing angular.json to the following, non app breaking error occurs, only displaying in vsc terminal

"scripts": [
    "../node_modules/chart.js/dist/chart.cjs",

This is the error received

ERROR ReferenceError: getComputedStyle is not defined
    at ngOnInit (../src/app/viz/chart-one/chart-one.component.ts:18:29)
    at callHookInternal ../node_modules/@angular/core/fesm2022/core.mjs:3439:10)
    at callHook (../node_modules/@angular/core/fesm2022/core.mjs:3463:7)
    at callHooks (../node_modules/@angular/core/fesm2022/core.mjs:3423:9)
    at executeInitAndCheckHooks (../node_modules/@angular/core/fesm2022/core.mjs:3377:5)
    at refreshView (../node_modules/@angular/core/fesm2022/core.mjs:13033:11)
    at detectChangesInView (../node_modules/@angular/core/fesm2022/core.mjs:13242:5)
    at detectChangesInViewIfAttached (../ui/node_modules/@angular/core/fesm2022/core.mjs:13205:3)
    at detectChangesInComponent (../node_modules/@angular/core/fesm2022/core.mjs:13194:3)
    at detectChangesInChildComponents (../node_modules/@angular/core/fesm2022/core.mjs:13254:5)

Environment

  "dependencies": {
    "-": "^0.0.1",
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.1",
    "@ngxs/store": "^3.8.1",
    "@types/jest": "^29.5.8",
    "chart.js": "^4.4.0",
    "express": "^4.18.2",
    "jest": "^29.7.0",
    "jest-preset-angular": "^13.1.4",
    "ngx-cookie-service": "^17.0.0",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primeng": "^17.0.0-beta.1",
    "rxjs": "~7.8.0",
    "save-dev": "^0.0.1-security",
    "ts-node": "^10.9.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.1",
    "@angular/cli": "^17.0.1",
    "@angular/compiler-cli": "^17.0.0",
    "@ngxs/devtools-plugin": "^3.8.1",
    "@types/express": "^4.17.17",
    "@types/node": "^18.18.0",
    "typescript": "~5.2.2"
  }

Reproducer

No response

Angular version

17.0.1

PrimeNG version

17.0.0-beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.9.0

Browser(s)

No response

Steps to reproduce the behavior

Add chart.js to angular/PrimeNG project as instructed in PrimeNG docs 17.0.0-beta.1

Expected behavior

PrimeNG Angular17 chart.js integration without errors and app breaking errors

[MattL-NZ]

I am also facing a similar issue with Chart.JS 4.4.1 when running Angular 17.0.4

[ntitec]

I am also facing a similar issue

• Chart.JS 4.4.1
• Angular 17.0.7

[tsteuwer-accesso]

I've now ran into this same issue, however, I don't think it's actually a PrimeNG issue.

If you install chart.js via npm i chart.js, and open the node_modules/chart.js/package.json it references the main as ./dist/chart.cjs. However, there is no dist folder in the package.

If you instead download the tgz file directly, it does have the dist directory. I'm not sure why it's being deleted, but this has to be the issue.

Are all of you using Node 20? I am and that's where I'm encountering this issue.

Update I tried older versions of Node as well and it still happens. Very odd.

[kboussebat]

I change in angular.json to "scripts": [ "../node_modules/chart.js/dist/chart.cjs",

it work fine

[Freddyvial]

En mi caso: "scripts": []. Dado que ya en angular17 no es necesario. Me quedo perfecto muchas gracias.

[drbenn]

fixed/closed