How to resolve Angular 'node_modules/chart.js/dist/Chart.js' in '/data/build'?

Issue

I am now on the operations side,and I have a problem with the Teamcity build.

ng build

gives some warnings

[Run command] Workspace extension with invalid name (defaultProject) found.
[Run command] - Generating browser application bundles (phase: setup)...
[Run command]     TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

and error

[Run command] Error: Can't resolve 'node_modules/chart.js/dist/Chart.js' in '/data/build'

My package.json

"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/cdk": "^16.2.11",
    "@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",
    "@elastic/datemath": "^5.0.3",
    "@once/bootstrap-core": "^2.3.0-20231219134354",
    "chart.js": "^3.9.1",
    "chartjs-adapter-moment": "^1.0.0",
    "chartjs-chart-treemap": "^2.0.2",
    "dayjs": "^1.11.8",
    "flag-icons": "^6.6.6",
    "mobx": "^6.5.0",
    "mobx-angular": "^4.7.2",
    "mobx-utils": "^6.0.8",
    "moment": "^2.29.4",
    "ngx-daterangepicker-material": "^6.0.4",
    "ngx-infinite-scroll": "^16.0.0",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng": "^16.0.0",
    "rxjs": "^7.5.6",
    "tslib": "^2.3.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "^0.13.0"  

and my angular.json

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "../risknews-ui",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js"
        ],
        "allowedCommonJsDependencies": [
          "chart.js"

How to fix this error?

Solution

I think there is no need to import "node_modules/chart.js/dist/Chart.js" since you are already importing it, like below.

import Chart from 'chart.js';

So in angular.json we can remove the line! ("node_modules/chart.js/dist/Chart.js")

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "../risknews-ui",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [], 
        "allowedCommonJsDependencies": [
          "chart.js"

Answered By - Naren Murali