angular-cli: serve crashes randomly after upgrading to Angular 12
š Bug report
Command (mark with an x
)
- new
- build
- serve
- test
- e2e
- generate
- add
- update
- lint
- extract-i18n
- run
- config
- help
- version
- doc
Is this a regression?
yes, did not see this issue in Angular 10 or 11
Description
While running ng serve
for a few hours it will randomly crash with an error. When I upgraded to angular 12, I also upgraded to node 14.17.0
š¬ Minimal Reproduction
see above
š„ Exception or Error
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x1013024b5 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x1000b1919 node::Abort() [/usr/local/bin/node]
3: 0x1000b1a7f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001f5bb7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001f5b53 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x1003a2ed5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x1003a497a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
8: 0x1003a00a5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x10039d9d0 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x1003ac0da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x1003ac161 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x1003753be v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
13: 0x10060bd5f v8::internal::String::SlowFlatten(v8::internal::Isolate*, v8::internal::Handle<v8::internal::ConsString>, v8::internal::AllocationType) [/usr/local/bin/node]
14: 0x10073b507 v8::internal::Runtime_StringCharCodeAt(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
15: 0x100a80639 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
16: 0x3f2f450ab47
17: 0x3f2f452f014
Abort trap: 6
š Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ā³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.0.0
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64
Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.0
@angular-devkit/build-angular 12.0.0
@angular-devkit/core 12.0.0
@angular-devkit/schematics 12.0.0
@angular/cdk 10.2.7
@angular/fire 6.1.4
@angular/material 10.2.7
@schematics/angular 12.0.0
ng-packagr 12.0.0
rxjs 6.6.7
typescript 4.2.4
Anything else relevant?
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 53
- Comments: 112 (8 by maintainers)
good news guys, I have upgraded to latest version of angular and cli (12.1.3). I no longer facing OOM issue anymore during serving. I am not able to take the memory heap snapshot as it used up alot of memory to do that, thus i recorded down the memory usage based on task manager as a reference:
Before (12.1.0) Memory usage for each rebuild (MB): 5731 -> 5739 -> 6313 -> BOMB (normally will OOM not more than 5 times rebuild) Average rebuild duration: ~1m30s
After (12.1.3) Memory usage for each rebuild (MB): 5562 -> 5328 -> 5388 -> 5484 -> (will increase and decrease, but stay below 6gb) Average rebuild duration: ~10 - 30s
Note: I use --max_old_space_size=6000 in my project
No significant improve in cold build, thus I suspect it might related to this. https://github.com/angular/angular/pull/42759
Version
12.1.0
has been released which contains several performance improvements. We also introduced an experimental file system cache which should improve the second/warm build quite a lot. You can opt-in using theNG_PERSISTENT_BUILD_CACHE=1
environment variable.Please update using
ng update @angular/cli @angular/core
.If the issue persist please report back providing one of the following;
Same happens to me throughout my day, usually around 5 times a day. Any pointer to how to get memory heap snapshots for
ng serve
when this happens? (actually I use nx, so itāsnx serve
)After several hours of ng serve running (sometimes can be less than hour or 10 min) it crashes:
Angular CLI: 12.1.1 Node: 14.17.1 Package Manager: npm 6.14.13 OS: win32 x64
Angular: 12.1.1 ā¦ animations, cdk, cli, common, compiler, compiler-cli, core ā¦ forms, language-service, localize, material ā¦ platform-browser, platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1201.1 @angular-devkit/build-angular 12.1.1 @angular-devkit/core 12.1.1 @angular-devkit/schematics 12.1.1 @schematics/angular 12.1.1 rxjs 6.5.5 typescript 4.3.5
1. Check your build settings
As I understand some build defaults changed in Angular 12. If you migrated from a previous Angular version, first make sure that the migration got the correct settings for your development build (ng serve):
important: keep in mind that you may have repeated properties in
architect.build.options
and inarchitect.build.configurations.development
andng serve
will use the merge of those.2. Increase nodeās memory
Node >= 12 will use a maximum of 2GB for heap memory. You can increase this using a flag, but that requires rewriting you
ng serve
script inpackage.json
like this:Then you can use
npm start
to run your dev server.This will give you more compilations, but in the end it will still crash, until the actual memory leaks are fixed.
@alan-agius4 This is the test i did, crashed after 10 minutes of use. On Monday I will send you a snapshot of the memory
https://docs.google.com/document/d/1nzjpJXWU5n7fCV2Yym-yeHZ9VuiykvVqVR8ZL8yLBHk/edit?usp=sharing
Hi all,
Just want to re-cap what is happening in this issue, since there are a lot of comments and important information gets lost.
angular.json
configuration and verify that you are not running āproductionā builds during development. (see: https://github.com/angular/angular-cli/issues/20801#issuecomment-850334411)If you are on 12.0.3, and still experiencing OOM during re-builds please report back with with heap snapshots. Iāll leave this issue open for a couple of days until people provide confirmation that the issue is no longer preset or/and repros/heap snapshots.
The workaround I have found is run ng serve in this way:
node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng serve
otherwise node crash
@anton-white are you using angular material theming?
for me compile time issue was because of the following lines
ng update added the @use but kept second line. After removing that (https://github.com/angular/components/issues/22676#issuecomment-839877758) compile time has improved by a lot. memory usage is still high.
CLI on
12.2.0
still has the same issue, and even with--max_old-space-size=12000
.Jumping in here. I am experiencing the same OOM crashes after upgrading to v12.
I am open to share privately my repo to you @alan-agius4 or anybody who could investigate the issue. Falling back to v11 now, because
ng serve
doesnāt work anymore. Thanks for looking into it!Edit: Same after latest upgrades:
Anyone is still experiencing this issue with
ng serve
in12.0.1
or later?node --inspect-brk node_modules/@angular/cli/lib/init.js serve
chrome://inspect
in the address barinspect
button from one of your applications in the Remote Target section.Chrome DevTools
>Memory
Repeat the last 2 until the OOM error is shown, once done, save the last couple of snapshots and send them over.
I spent some times looking into a project that does show OOM issues during rebuilds. The project in question was provided by @ganySA privately. (Thanks a lot for this).
What I found out from my investigation on the mentioned project is;
To sum it up, from the project I look at, it doesnāt appear that there is a memory leak as memory usage stays within the same range over a number of rebuilds but rather the increase in memory usage is to be attributed to Webpack 5 caching.
Note: there are number of options such as
outputHashing
being enabled andnamedChunks
being disabled can contribute to a memory leak when used in watch mode.That said, without a reproduction even shared privately or memory snapshots, we will not be able to determine if there is a memory leak, or itās just the expected increase of memory usage due to Webpack 5 caching, in the upcoming release we also shifted SASS to be processed in workers which should help reduce memory pressure on the main thread since workers have a dedicated memory pool.
I upgraded to Angular
13.1.3
hoping that this issue would go away, but itās still there š¦FYI for us, removing an heavy css import fixed the problem.
We were including a ~1MB+ stylesheet in one of our .scss fileā¦ which started to trigger this issue after upgrading to Angular 12. We circumvented that by including it directly in index.html. Thatās a bit dirty, but at least it seems to have made Angular usable again.
@alan-agius4 Iāve been running into this issue as well. Iāve attached some memory snapshots. At the point where the process ran out of memory it was using 4GB of memory.
Angular CLI: 12.2.2 Node: 16.7.0 (Unsupported) Package Manager: npm 7.20.3 OS: darwin x64
Angular: 12.2.2 ā¦ animations, cdk, cli, common, compiler, compiler-cli, core ā¦ forms, language-service, platform-browser ā¦ platform-browser-dynamic, platform-server, pwa, router ā¦ service-worker
Package Version
@angular-devkit/architect 0.1201.4 @angular-devkit/build-angular 12.2.2 @angular-devkit/core 12.2.2 @angular-devkit/schematics 12.2.2 @nguniversal/builders 12.1.0 @nguniversal/express-engine 12.1.0 @schematics/angular 12.2.2 ng-packagr 12.0.5 rxjs 6.6.3 typescript 4.2.4
Archive.zip
The error is thrown while changing the project code and saving files to live rebuild & reload the app. As you rebuild the project while serving it, it will keep increasing the memory usage until it crashes. What i think is that somehow NodeJs donāt manage to clear the memory used for the first serve session and each rebuild creates another session without destroying the old one. So serving the project without having cli to rebuild the project wonāt replicate the error.
any updates?
I had the same problem, where the ng build command would fail with OOM errors (Angular 12.0.4). It seems to be fixed after using the following properties in angular.json (meaning the build finished, but Iām not sure if the problem is fixed or if it will reappear; I will come back with an update if it fails again):
OOM errors are also thrown by ng serve after a while. It is also noticeably slower than previous Angular versions. It also seems to be triggering more recompiles than previous versions (i.e. not only on file save), but I think this behavior is intended?
Since upgrading to Angular 12 we are getting OOM (error 137) error during CI/CD build on Azure DevOps.
We have tried the following without success:
On my Macbook 16" 2020 with 32GB of RAM i can build the app using ng build --configuration production
We built a Ubunt Linux VM with similar memory constraints as the Hosted Azure DevOps build agent and attempted a build which failed with error 137 OOM.
Regards, Tarek
I am encountering the same problem after the upgrade to 12.0.1 (Node.js version used is 14.17.0)
ng build -c production
results in OOM every time.ng serve
andng test
are working fine.Yesterday release (12.0.1) contains several performance improvements. Please give it a try!
@pmoleri , Iāve got everything you mentioned in there, except sadly only
"aot": true
is not enabled for dynamic html renderingI donāt have large files in angular. It just consumes up to 2.9 gb and during build, itād go up to 3.5 gb. I have zero idea why whould serve take that much space. The project is huge and this was pain but nothing is clear about whys here.
I had to ditch Ng serve completely and use Ng build with nodemon and angular 13. Since angular 13 caches build. This helped as a workaround with a great difference. Now angular consumes 50mb runtime and 1 gb during build.
I still wonder why build would go that much high. Itās just frontend. Nestjs (backend) does tons better job than angular in this.
Sadly this is not an issue with Angular, but with Webpack: https://github.com/webpack/webpack/issues/12771
I used to crash after every change, but after minifying (any simplifying) JSON files from 500Mb to 50Mb, the crashes are gone. So my suggestion is to look for large imported files and try not to import them if possible.
I have just updated to nx 13.1.3 and Angular 12.x.x and my server build crashes! I do usually run the server with the command
nx serve server
and now it crashes after every change. Do nx team still need reproduction repositories?Additional info: Due to upgrading problems I removed node_modules and package_lock prior install. Thus it is a pretty clean repository now.
19.11.2021:
Updated to nx v
13.2.0
and angular v~13.0.0
, the error is still there. (Also npm was not able to update, had to use yarn)Updated to 12.2.0, it seems better now.
Iām on Angular 12.2.0 and it keeps happening all the time.
@oshri551, please share the output of
ng v
together with memory heap snapshots.i have no idea what you can do to trigger it, it just happen as i am working i canāt keep tracking of memory while doing that.
but i didnāt mean that you need to use
ng build
command, what i meant is the live-rebuild that happens when you change files while serving the project withng serve
without using
max_old_space_size
setting the project crashes much more faster.i have 32gb rams, donāt think my pc really getting out of memoryā¦ NodeJs just reaches 8GB while serving the project and crashes since itās the allowed limit for it.
@devhus, please provide at least one of the following, otherwise we will be unable to get investigate your issue.
Hi @legrottagliegionata, letās keep this issue focused on OOM errors. If you are experiencing a different problem ideally please open a new issue.
Those are surprising, I think. So it does appear thereās a a memory leak somewhere, as an incremental build adds some 300MBs of extra memory usage. I am especially surprised by the 3 builds where it stayed at 3GB, then grew further in the sixth build. I havenāt seen that behavior in a test project I have been using; the usage was at 1.8GB after the initial build and grew to 2.2GB after rebuilds, but it appeared to stay at that level.
@legrottagliegionata Could you try with latest
@angular/compiler-cli
snapshots:It includes a fix for a memory leak, which unfortunately has missed the 12.0.4 release. The above sha refers to the
12.0.x
version of@angular/compiler-cli
so should be a drop-in replacement.No need thanks
We experience the same problems in version 12.0.3. It typically happens when I change the branch (this leads to many changes in different files at the same time) and an incremental build is triggered.
Hey, Iām having the same problem:
Although it appears minutes/hours (30 minutes/2 hours) after starting angular and developing.
Well I donāt have a memory snapshot but Iāll be watching to get it next time it happens.
Thanks!
great work, @legrottagliegionata
@qortex, It appears that for development builds you are using production settings.
This is because a migration was not run during
ng-update
because you are using unofficial builders and we cannot know how these builders interact with the builder options and therefore we cannot modify the configuration.As such it is recommend that such builders provide their own ng-update migration or at least document what needs to change for version 12.
Adding the below to
projects.app.architect.build.options
should make things better.@ale-mazz, unfortunately, the dump is not helpful. Without at a memory heap and cpu profile we will not be able to get to the bottom of your issue.
@alan-agius4 Pasting here my stacktrace, unfortunately i canāt share with you my project cause companyās limitations.
Before angular v12 we were able to run it without giving node more than 2gbs of memory, now it crashes even with 6gbs of memory.
This saved me! Thank you
Yesā¦ after a lot of code changes it crash
This could be related to this issue. There is already a fix in the pipeline. As a temporary fix for now, you can downgrade just the @angular-devkit/build-angular to v12.0.0 instead of v12.0.1 and retry the
ng build -c production
command.Why would you have optimizations enabled during
ng serve
?In my case disabling styles optimizations in
angular.json
makes the build work again without crashing out of memory i have 32gb of RAM and compiling with--max-old-space-size=12288
makes the build crash.One important thing that iāve noticed is that the build start crashing after upgrading from project clarity 4 -> 5, iām assuming that the build is crashing because of some bug on css processing libraries with āmodern cssā