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
 }
 }
}

• Ｒの卄ＩＴ: Try again before building the the project do the - npm install -f and make sure delete the node_module
• Dheeraj S: @Rの卄IT I deleted the node_modules and ran npm install -f. But that did not solve the problem.
• Ｒの卄ＩＴ: Could you please share your package.json & angular.json file here or if you have github source code will be great
• Dheeraj S: I have shared package.json and angular.json for your reference @Rの卄IT
• Ｒの卄ＩＴ: "@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", --------- something wrong these packages - Do one thing create an another branch and on that branch remove these package then build your project it will work perfectly. then you can deal with these packages after that

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"

• xaberue: I was suffering the same problem in a very basic project with the default dependencies, thanks for that! This worked for me
• Marcin Żmigrodzki: I had problem after upgrading my project from angular 17 to angular 18, and after few hours of searching your solution helped.
• Alain Dumesny: all you did was revert back to the old build system (webpack) instead of esbuild, the latter being a lot faster (+vite for ng serve). see angular.dev/tools/cli/build-system-migration

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.

• Dheeraj S: This helped. For me jest was also causing problem. Running npm ls jsdom as @Matthieu Riegler said helped me find the issue. I removed jest, updated fabric like you said and now it is working fine. I don't know if there is a browser version of jest. Until I find one I have to continue without jest.

Answer 3

Moving to "fabric": "^6.0.0-rc2" helped me, there are some breaking changes though.