Problem while ng build using the new angular 17 application builder

Question

ng serve is working fine, but ng build is giving this error.

X [ERROR] Could not resolve "path"

(disabled):node_modules/jsdom/lib/api.js:3:21:
  3 │ const path = require("path");
    ╵                      ~~~~~~

The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "fs"

(disabled):node_modules/jsdom/lib/api.js:4:19:
  4 │ const fs = require("fs").promises;
    ╵                    ~~~~

The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "url"

node_modules/http-proxy-agent/dist/agent.js:40:38:
  40 │ const url_1 = __importDefault(require("url"));
     ╵                                       ~~~~~

The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "child_process"

node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:6:12:
  6 │ } = require("child_process");
    ╵             ~~~~~~~~~~~~~~~

The package "child_process" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

ng build is working fine with old build system

I tried adding

  "browser": {
    "fs": false,
    "os": false,
    "net": false,
    "tls": false,
    "url": false,
    "http": false,
    "path": false,
    "util": false,
    "zlib": false,
    "https": false,
    "assert": false,
    "stream": false,
    "child_process": false   }

to package.json but it did not work.

My package.json

{
  "name": "angular-new-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "prepare": "husky"
  },
  "lint-staged": {
    "*.{md,html}": [],
    "*.{js,jsx,mjs,cjs,ts,tsx,json}": [
      "prettier --write"
    ]
  },
  "private": true,
  "dependencies": {
    "@ag-grid-community/angular": "^30.0.3",
    "@ag-grid-community/client-side-row-model": "^30.0.3",
    "@ag-grid-community/core": "^30.0.3",
    "@ag-grid-community/csv-export": "^30.0.3",
    "@ag-grid-community/styles": "^30.0.3",
    "@ag-grid-enterprise/clipboard": "^30.0.3",
    "@ag-grid-enterprise/core": "^30.0.3",
    "@ag-grid-enterprise/excel-export": "^30.0.3",
    "@ag-grid-enterprise/menu": "^30.0.3",
    "@ag-grid-enterprise/server-side-row-model": "^30.0.3",
    "@angular/animations": "^17.0.8",
    "@angular/cdk": "^17.0.4",
    "@angular/common": "^17.0.8",
    "@angular/compiler": "^17.0.8",
    "@angular/core": "^17.0.8",
    "@angular/forms": "^17.0.8",
    "@angular/google-maps": "^17.0.4",
    "@angular/material": "^17.0.4",
    "@angular/platform-browser": "^17.0.8",
    "@angular/platform-browser-dynamic": "^17.0.8",
    "@angular/router": "^17.0.8",
    "@fancyapps/fancybox": "^3.5.7",
    "@fortawesome/angular-fontawesome": "^0.14.0",
    "@fortawesome/fontawesome-pro": "^6.4.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
    "@fortawesome/pro-thin-svg-icons": "^6.4.2",
    "@kolkov/angular-editor": "^3.0.0-beta.0",
    "@ng-select/ng-select": "^12.0.4",
    "@ngneat/tailwind": "^7.0.3",
    "@ngrx/effects": "^17.0.1",
    "@ngrx/store": "^17.0.1",
    "@ngrx/store-devtools": "^17.0.1",
    "@types/mousetrap": "^1.6.11",
    "@types/stripe-v3": "^3.1.29",
    "angular-google-tag-manager": "^1.9.0",
    "atatus-spa": "^4.5.0",
    "chart.js": "^4.3.0",
    "crypto-js": "^4.2.0",
    "dexie": "^3.2.4",
    "fabric": "^5.3.0",
    "font-awesome": "^4.7.0",
    "intro.js": "^7.2.0",
    "jquery": "^3.7.0",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.29",
    "mousetrap": "^1.6.5",
    "ng-recaptcha": "^13.2.1",
    "ngx-color-picker": "^14.0.0",
    "ngx-dropzone": "^3.0.0",
    "ngx-image-cropper": "^7.0.1",
    "ngx-image-zoom": "^2.1.0",
    "ngx-mask": "^16.2.3",
    "pusher-js": "^8.2.0",
    "rxjs": "^7.8.1",
    "signature_pad": "^4.1.5",
    "stripe-angular": "^1.9.3",
    "tailwindcss": "^3.3.2",
    "tslib": "^2.6.0",
    "typed.js": "^2.0.16",
    "workbox-core": "^7.0.0",
    "workbox-precaching": "^7.0.0",
    "workbox-routing": "^7.0.0",
    "workbox-strategies": "^7.0.0",
    "workbox-window": "^7.0.0",
    "zone.js": "^0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.8",
    "@angular-eslint/builder": "^17.1.1",
    "@angular-eslint/eslint-plugin": "^17.1.1",
    "@angular-eslint/eslint-plugin-template": "^17.1.1",
    "@angular-eslint/schematics": "^17.1.1",
    "@angular-eslint/template-parser": "^17.1.1",
    "@angular/cli": "^17.0.8",
    "@angular/compiler-cli": "^17.0.8",
    "@ngrx/eslint-plugin": "^17.0.1",
    "@ngrx/schematics": "^17.0.1",
    "@schematics/angular": "^17.0.8",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@types/crypto-js": "^4.1.1",
    "@types/fabric": "^5.3.3",
    "@types/google.maps": "^3.53.4",
    "@types/jest": "^29.5.8",
    "@types/node": "^20.4.1",
    "@types/pdfmake": "^0.2.2",
    "@typescript-eslint/eslint-plugin": "^6.16.0",
    "@typescript-eslint/parser": "^6.10.0",
    "autoprefixer": "^10.4.2",
    "cypress": "^13.3.1",
    "eslint": "^8.53.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^43.0.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "husky": "^9.0.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "^13.1.4",
    "lint-staged": "^15.2.0",
    "local-web-server": "^5.3.0",
    "postcss": "^8.4.25",
    "prettier": "3.1.1",
    "rimraf": "^5.0.1",
    "source-map-explorer": "^2.5.3",
    "ts-jest": "^29.1.1",
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.1",
    "typescript": "~5.2.2",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "workbox-cli": "^7.0.0"
  },
  "overrides": {
    "got": "^12.1.0",
    "axios": "^1.6.0",
    "@koa/cors": "^5.0.0"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": "*************************",
    "schematicCollections": ["@angular-eslint/schematics", "@ngrx/schematics"]
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-new-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "allowedCommonJsDependencies": ["fabric", "jspdf-autotable"],
            "outputPath": {
              "base": "public",
              "browser": ""
            },
            "index": "src/index.html",
            "polyfills": ["src/polyfills.ts"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json",
              "src/.well-known",
              "src/version.json"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "./node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css",
              "././src/assets/style_varients/fonts/fontAwesome/css/all.css"
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["././src/assets/style_varients"]
            },
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/@fancyapps/fancybox/dist/jquery.fancybox.js"
            ],
            "browser": "src/main.ts"
          },
          "configurations": {
            "production": {
              "sourceMap": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "17mb",
                  "maximumError": "19mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "17mb",
                  "maximumError": "19mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "angular-new-app:build:production"
            },
            "development": {
              "buildTarget": "angular-new-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "angular-new-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "schematics": {
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  }
}

Answer 1

Unfortunely for me the fix using "fabric": "5.3.0-browser" not work, but I found a solution using angular 17:

Under build in angular.json

change "builder": "@angular-devkit/build-angular:application" to: "builder": "@angular-devkit/build-angular:browser" and "browser": "src/main.ts" to "main": "src/main.ts"

Answer 2

I had the same issue and it seems to be due to fabric having a browser and non-browser version.

Check this thread: https://github.com/angular/angular/issues/54235

But TL;DR, update your packe.json from "fabric": "^5.3.0" to "fabric": "5.3.0-browser" delete node_modules an lock and run npm i again before building.