I am currently in the process of upgrading angular, including angular material to v17. I am following the angular.dev guide on this, which can be found here https://angular.dev/update-guide?v=16.0-17.0&l=2 (you must check the boxes “I use Angular Material” and “I use Windows“). ng update @angular/core@17 @angular/cli@17 goes through without a problem. When I try to execute the ng update @angular/material@17, the angular/cdk is at first glance successfully update to version 17.3.10, but the same cannot be said for angular material. The version of angular material is changed to 17.3.10 in the package.json, but for some odd reason the migrations cannot be successfully executed on that package. It freezes as soon as it reaches “> Updates Angular Material to v17” and after a couple of hours it finally says that Javascript heap is out of memory.
Here is the logs during ng update @angular/material@17
PS C:UsersMyUserDocumentsProjectfrontend> .node_modules.binng update @angular/material@17
Using package manager: npm
Collecting installed dependencies...
Found 55 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular/cdk @ "17.3.10" (was "16.2.14")...
Updating package.json with dependency @angular/material @ "17.3.10" (was "16.2.14")...
Updating package.json with dependency @angular/material-moment-adapter @ "17.3.10" (was "16.2.14")...
UPDATE package.json (3626 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cdk' **
> Updates the Angular CDK to v17.
✓ Updated Angular CDK to version 17
Migration completed (No changes made).
** Executing migrations of package '@angular/material' **
> Updates Angular Material to v17.
<--- Last few GCs --->
[15460:00000196595FDB10] 5420717 ms: Mark-sweep 4044.4 (4139.9) -> 4035.4 (4135.1) MB, 1617.2 / 0.0 ms (average mu = 0.223, current mu = 0.147) allocation failure; scavenge might not succeed
[15460:00000196595FDB10] 5421635 ms: Mark-sweep 4043.9 (4139.9) -> 4035.6 (4135.4) MB, 685.8 / 0.0 ms (average mu = 0.233, current mu = 0.253) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF6A6809E7F node_api_throw_syntax_error+175967
2: 00007FF6A6790C06 SSL_get_quiet_shutdown+65750
3: 00007FF6A6791FC2 SSL_get_quiet_shutdown+70802
4: 00007FF6A722A214 v8::Isolate::ReportExternalAllocationLimitReached+116
5: 00007FF6A7215572 v8::Isolate::Exit+674
6: 00007FF6A70973CC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
7: 00007FF6A70A46AD v8::internal::Heap::PublishPendingAllocations+1117
8: 00007FF6A70A1737 v8::internal::Heap::PageFlagsAreConsistent+3367
9: 00007FF6A7093E67 v8::internal::Heap::CollectGarbage+2039
10: 00007FF6A70AA823 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
11: 00007FF6A70AB0CD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
12: 00007FF6A70BA903 v8::internal::Factory::NewFillerObject+851
13: 00007FF6A6DABEB5 v8::internal::DateCache::Weekday+1349
14: 00007FF6A72C78B1 v8::internal::SetupIsolateDelegate::SetupHeap+558193
15: 00007FF6A7279F91 v8::internal::SetupIsolateDelegate::SetupHeap+240465
16: 00007FF6A72991AB v8::internal::SetupIsolateDelegate::SetupHeap+367979
17: 00007FF627A768BC
I am using node 18.13.0 and here is also a list of the dependencies up until the update of the angular material package is started:
"private": true,
"dependencies": {
"@angular/animations": "^17.3.12",
**"@angular/cdk": "^16.2.14",**
"@angular/common": "^17.3.12",
"@angular/compiler": "^17.3.12",
"@angular/core": "^17.3.12",
"@angular/forms": "^17.3.12",
**"@angular/material": "^16.2.14",**
**"@angular/material-moment-adapter": "^16.2.14",**
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@angular/router": "^17.3.12",
"@ngxs/logger-plugin": "^18.0.0",
"@ngxs/store": "^18.0.0",
"jsnlog": "^2.30.0",
"moment": "^2.29.1",
"pdfmake": "^0.2.4",
"rxjs": "~7.4.0",
"tslib": "^2.3.1",
"uuid": "^8.3.2",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.11",
"@angular-eslint/builder": "^13.0.1",
"@angular-eslint/eslint-plugin": "^13.0.1",
"@angular-eslint/eslint-plugin-template": "^13.0.1",
"@angular/cli": "^17.3.11",
"@angular/compiler-cli": "^17.3.12",
"@angular/language-service": "^17.3.12",
"@ngxs/devtools-plugin": "^18.0.0",
"@types/jasmine": "^3.10.12",
"@types/node": "^16.11.12",
"@types/pdfmake": "^0.1.19",
"@types/uuid": "^8.3.3",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"codelyzer": "^6.0.2",
"eslint": "^8.57.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-angular": "^4.1.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jasmine": "^4.1.3",
"eslint-plugin-jsdoc": "^37.1.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"jasmine-core": "~3.10.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "^6.3.20",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage": "^2.2.1",
"karma-jasmine": "^4.0.2",
"karma-jasmine-html-reporter": "^1.7.0",
"karma-spec-reporter": "0.0.32",
"prettier": "^2.5.1",
"ts-node": "~10.4.0",
"typescript": "^5.4.5",
"webpack-sources": "^3.2.2"
}
I tried to manually install @angular/material@17 and @angular/material-moment-adapter@17, and then to run the material migration schematics, but still got the same issue.I also tried different permutations on the versions of nodejs, typescript, typescript-eslint, ts-node, etc., but still stuck at the same problem. Any ideas on why this would freeze up or how I can manage through?