I am trying to build my Angular 11 app, that uses Electron 11. I keep on getting build errors. The surprising part is it worked perfectly fine yesterday, but today without making any changes it is giving me build errors. When I try to run it locally, I get the following errors:
Module not found: Error: Can't resolve 'active-win' in '*directory_path*\node_modules\*custom_npm_package_name*\dist\services'
Error: ./node_modules/execa/index.js
Module not found: Error: Can't resolve 'child_process' in '*directory_path*\node_modules\execa'
Error: ./node_modules/execa/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'child_process' in '*directory_path*\node_modules\execa\node_modules\cross-spawn'
Error: ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\electron'
Error: ./node_modules/electron-log/lib/transports/file/index.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\electron-log\lib\transports\file'
Error: ./node_modules/electron-log/lib/transports/file/findLogPath.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\electron-log\lib\transports\file'
Error: ./node_modules/electron-log/lib/transports/file/getAppName.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\electron-log\lib\transports\file'
Error: ./node_modules/execa/node_modules/cross-spawn/lib/util/readShebang.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\execa\node_modules\cross-spawn\lib\util'
Error: ./node_modules/isexe/index.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\isexe'
Error: ./node_modules/isexe/windows.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\isexe'
Error: ./node_modules/isexe/mode.js
Module not found: Error: Can't resolve 'fs' in '*directory_path*\node_modules\isexe'
Module not found: Error: Can't resolve 'screenshot-desktop' in '*directory_path*\node_modules\*custom_npm_package_name*\dist\services'
Module not found: Error: Can't resolve 'sharp' in '*directory_path*\node_modules\*custom_npm_package_name*\dist\services'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
My package.json is as follows:
"scripts": {
"postinstall": "electron-builder install-app-deps",
"ng": "ng",
"start": "npm-run-all -p electron:serve ng:serve",
"build": "npm run electron:serve-tsc && ng build --base-href ./",
"build:dev": "npm run build -- -c dev",
"build:prod": "npm run build -- -c production",
"ng:serve": "ng serve -c web -o",
"electron:serve-tsc": "tsc -p tsconfig.serve.json",
"electron:serve": "wait-on tcp:4200 && npm run electron:serve-tsc && npx electron . --serve",
"electron:local": "npm run build:prod && npx electron .",
"electron:build": "npm run build:prod && electron-builder build --publish=never",
"test": "ng test --watch=false",
"test:watch": "ng test",
"e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
"version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"lint": "ng lint"
},
"dependencies": {
"@angular-material-extensions/fab-menu": "^3.0.0",
"@angular/animations": "~9.1.9",
"@angular/cdk": "^9.2.4",
"@angular/flex-layout": "^9.0.0-beta.31",
"@angular/material": "^9.2.4",
"@sentry/browser": "^5.18.0",
"amplitude-js": "^5.9.0",
"canvas-confetti": "^1.3.2",
"codelyzer": "^5.1.2",
"electron-active-window": "0.0.4",
"electron-log": "3.0.9",
"electron-prompt": "^1.6.1",
"electron-store": "^3.3.0",
"electron-updater": "^4.2.4",
"http-status-codes": "^1.4.0",
"is-admin": "^3.0.0",
"karma-chrome-launcher": "~3.1.0",
"keytar": "^4.13.0",
"ngx-print": "^1.2.0-beta.5",
"protractor": "~7.0.0",
"rxjs": "~6.5.4",
"socket.io-client": "^2.3.0",
"tiny-worker": "^2.3.0",
"tslib": "^1.10.0",
"tslint": "~6.1.0",
"tsyringe": "4.4.0",
"typescript-styleguide-tslint": "^1.1.5",
"uuid": "^8.1.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-builders/custom-webpack": "11.0.0",
"@angular-devkit/build-angular": "0.1102.0",
"@angular-eslint/builder": "1.2.0",
"@angular-eslint/eslint-plugin": "1.2.0",
"@angular-eslint/eslint-plugin-template": "1.2.0",
"@angular-eslint/schematics": "1.2.0",
"@angular-eslint/template-parser": "1.2.0",
"@angular/cli": "11.2.0",
"@angular/common": "11.2.0",
"@angular/compiler": "11.2.0",
"@angular/compiler-cli": "11.2.0",
"@angular/core": "11.2.0",
"@angular/forms": "11.2.0",
"@angular/language-service": "11.2.0",
"@angular/platform-browser": "11.2.0",
"@angular/platform-browser-dynamic": "11.2.0",
"@angular/router": "11.2.0",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "6.0.0",
"@types/jasmine": "3.6.3",
"@types/jasminewd2": "2.0.8",
"@types/mocha": "8.2.0",
"@types/node": "12.12.6",
"@typescript-eslint/eslint-plugin": "4.15.0",
"@typescript-eslint/eslint-plugin-tslint": "4.15.0",
"@typescript-eslint/parser": "4.15.0",
"chai": "4.2.0",
"conventional-changelog-cli": "2.1.1",
"core-js": "3.6.5",
"cross-env": "7.0.3",
"electron": "11.2.0",
"electron-builder": "22.9.1",
"electron-reload": "1.5.0",
"eslint": "7.20.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "31.6.1",
"eslint-plugin-prefer-arrow": "1.2.3",
"jasmine-core": "3.6.0",
"jasmine-spec-reporter": "6.0.0",
"karma": "6.1.1",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-electron": "6.3.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"mocha": "8.2.1",
"npm-run-all": "4.1.5",
"rxjs": "6.6.3",
"spectron": "13.0.0",
"ts-node": "9.1.1",
"tslib": "2.1.0",
"typescript": "4.0.5",
"wait-on": "5.0.1",
"webdriver-manager": "12.1.8",
"zone.js": "0.10.3"
},
"engines": {
"node": ">=10.13.0"
},
"browserslist": [
"chrome 83"
]
I tried setting:
"browser": {
"child_process": false,
"fs": false
}
in package.json but that doesn't work.
Looking at similar posts on StackOverflow, I also tried adding target: "electron-renderer" inside node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js
Earlier, I got the same error for module stream, os, path as well. I was able to rectify those 3 module errors by setting
node: {
stream: true
}
inside node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js
However, I am not able to rectify the error for fs, spark, screenshot-desktop, active-win and child_process
I also tried deleting the node_modules, package-lock.json, npm cache verify and building again. But it doesn't solve the issue.
Any help is appreciated. Thanks.