I'm asking your help because of an JS heap out of memory when i want to start the local server since my migration from angular 11 to angular 12 (or 13 or 14, tried all versions with the same issus).
It append during the building phase
➜ easyevent-web git:(feature/migration-angular-12) ✗ npm start
> easyevent-web@1.0.0 start
> ng serve --configuration=dev --proxy-config proxy.conf.json
⠋ Generating browser application bundles (phase: setup)...[HPM] Proxy created: /event-planner-api -> http://localhost:8080
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
⠋ Generating browser application bundles (phase: building)...WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(30em, 14)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
12 │ $fa-li-width: (30em / 14) !default;
│ ^^^^^^^^^
╵
node_modules/font-awesome/scss/_variables.scss 12:24 @import
node_modules/font-awesome/scss/font-awesome.scss 6:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(4em, 3)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
6 │ font-size: (4em / 3);
│ ^^^^^^^
╵
node_modules/font-awesome/scss/_larger.scss 6:15 @import
node_modules/font-awesome/scss/font-awesome.scss 10:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(3em, 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
7 │ line-height: (3em / 4);
│ ^^^^^^^
╵
node_modules/font-awesome/scss/_larger.scss 7:17 @import
node_modules/font-awesome/scss/font-awesome.scss 10:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(18em, 14)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
4 │ width: (18em / 14);
│ ^^^^^^^^^
╵
node_modules/font-awesome/scss/_fixed-width.scss 4:11 @import
node_modules/font-awesome/scss/font-awesome.scss 11:9 root stylesheet
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(2em, 14)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
14 │ top: (2em / 14);
│ ^^^^^^^^
╵
node_modules/font-awesome/scss/_list.scss 14:9 @import
node_modules/font-awesome/scss/font-awesome.scss 12:9 root stylesheet
WARNING: 1 repetitive deprecation warnings omitted.
⠹ Generating browser application bundles (phase: building)...node:events:491
throw er; // Unhandled 'error' event
^
Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
at new NodeError (node:internal/errors:387:5)
at Worker.[kOnExit] (node:internal/worker:277:26)
at Worker.<computed>.onexit (node:internal/worker:199:20)
Emitted 'error' event on Worker instance at:
at Worker.[kOnExit] (node:internal/worker:277:12)
at Worker.<computed>.onexit (node:internal/worker:199:20) {
code: 'ERR_WORKER_OUT_OF_MEMORY'
}
The deprecation warning come from the using of font-anwsome package, it didn't change anything to remove that (already tried)
Increase the max old space size change nothing for me --max_old_space_size=4096
my ng v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.18
Node: 16.17.0 (Unsupported)
Package Manager: npm 8.15.0
OS: darwin x64
Angular: 12.2.16
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.18
@angular-devkit/build-angular 12.2.18
@angular-devkit/core 12.2.18
@angular-devkit/schematics 12.2.18
@angular/cdk 11.1.0
@angular/cli 12.2.18
@schematics/angular 12.2.18
rxjs 6.6.3
typescript 4.3.5
Warning: The current version of Node (16.17.0) is not supported by Angular.
(about the warning, i tried to update node because was recommanded on an other forum for a similar issue. node 16.17 is supported with angular 13 but in my case not work even with angular 13.
my package.json
{
"name": "easyevent-web",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --configuration=dev --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.16",
"@angular/cdk": "^11.1.0",
"@angular/common": "^12.2.16",
"@angular/compiler": "^12.2.16",
"@angular/core": "^12.2.16",
"@angular/forms": "^12.2.16",
"@angular/localize": "^12.2.16",
"@angular/platform-browser": "^12.2.16",
"@angular/platform-browser-dynamic": "^12.2.16",
"@angular/router": "^12.2.16",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"@ng-select/ng-select": "^6.1.0",
"@swimlane/ngx-charts": "^17.0.0",
"angular-count-to": "0.0.3",
"angularx-qrcode": "^11.0.0",
"bootstrap": "^4.6.0",
"chart.js": "^2.9.4",
"font-awesome": "^4.7.0",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
"ng-multiselect-dropdown": "^0.22.11",
"ng2-charts": "^2.4.2",
"ngx-bootstrap": "^6.2.0",
"ngx-owl-carousel-o": "^5.0.0",
"ngx-spinner": "^11.0.2",
"rxjs": "^6.6.3",
"sass": "^1.54.5",
"screenfull": "^5.1.0",
"tslib": "^2.4.0",
"uuid": "^8.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.18",
"@angular/cli": "^12.2.18",
"@angular/compiler-cli": "^12.2.16",
"@angular/language-service": "^12.2.16",
"@types/jasmine": "^3.10.3",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^14.14.22",
"codelyzer": "^6.0.2",
"jasmine-core": "^4.3.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.4.0",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.7.0",
"protractor": "~7.0.0",
"ts-node": "^9.1.1",
"tslint": "~6.1.0",
"typescript": "^4.3.5"
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"easyevent-web": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/easyevent-web",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"src/styles.scss",
"src/assets/app.scss",
"node_modules/font-awesome/scss/font-awesome.scss"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "easyevent-web:build"
},
"configurations": {
"dev": {
"browserTarget": "easyevent-web:build:dev"
},
"production": {
"browserTarget": "easyevent-web:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "easyevent-web:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "easyevent-web:serve"
},
"configurations": {
"production": {
"devServerTarget": "easyevent-web:serve:production"
}
}
}
}
}
},
"defaultProject": "easyevent-web"
}
Everything is working very well with angular 11. The migration to a later version causes out of memories :(
Somebody had the same issus ? or do you see a solution ?
Thanks to all.