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