Not working in Angular 20

[jatingarala]

[ERROR] TS2307: Cannot find module 'chart.js/dist/types/utils' or its corresponding type declarations. [plugin angular-compiler]

node_modules/ng2-charts/lib/ng-charts.provider.d.ts:3:28:
  3 │ import { DeepPartial } from 'chart.js/dist/types/utils';
    ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~

I get above error when update angular to 20, I am using latest ng2-charts version

"ng2-charts": "^8.0.0",
"chart.js": "^4.4.9",

Request to update version to support Angular 20.

Thank you

[wojo1206]

Short term fix, add skip type-checking of declaration files (.d.ts files), to your tsconfig.json:

{
  "compilerOptions": {
    "skipLibCheck": true
},

[docaohuynhcse]

Short term fix, add skip type-checking of declaration files (.d.ts files), to your tsconfig.json:

{
  "compilerOptions": {
    "skipLibCheck": true
},

This fixed it for me. tks

[basrieter]

I used patch-package to patch ng-charts.provider.d.ts to make it work again.

[zijianhuang]

I used patch-package to patch ng-charts.provider.d.ts to make it work again.

@basrieter
Can you please describe how to use patch-package to patch ng-charts.provider.d.ts ?

for example, do I need to fork the repos, and rebuild using Angular 19, etc. ?

[basrieter]

It is much simpler:

1. Install Patch Package: npm install patch-package --save-dev
2. Create a folder patches at the root of your project (same folder as you packages.json)
3. Copy this file there: ng2-charts+8.0.0.patch
4. Run npm install (or npm ci) to install and automatically patch the package.

I only changed this:

-import { DeepPartial } from 'chart.js/dist/types/utils';
+import { DeepPartial } from 'node_modules/chart.js/dist/types/utils';

[ZuBB]

my 5c on this: this issue (compile error) has nothing to do with angular 20. matching of angular's versrions between your app (probably v20) and peer deps of this package is a separate issue.

problem we see here already has been filled as #1991.

imho this should be closed in favor of it

[bursauxa]

@ZuBB the issue is caused by replacing typescript module resolution node with bundler.

While it it not strictly related to Angular 20, the ng update command, when updating to Angular 20, makes that change.

As such, people who are not on the bleeding edge of updating their tsconfig file are going to first encounter this issue when they update from Angular 19 to 20.

A simple workaround is to revert the change in tsconfig. For our project it worked without any adverse effect that I could notice. However, as usual in these matters, your mileage may vary.

(the other fixes suggested around different issues look better on paper, but they did not work for me)