Maximum call stack size exceeded with large SVG

[jaredtbates]

🐞 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, the previous version in which this bug was not present was: 13.2.2 (I think)

We noticed this while upgrading from Angular 12 to 13. For now, we will upgrade to 13.2.2 instead of the latest.

Description

When compiling an app that has a large SVG in a template, the build fails with a "Maximum call stack size exceeded" error. This happens on both ng serve and ng build.

Please note: I understand my minimal reproduction may not be the ideal way to host SVGs in templates, however this is a rudimentary example to replicate an issue that we are seeing in our codebase. Thanks for understanding!

🔬 Minimal Reproduction

https://github.com/sightsoundtheatres/call-stack-repro

🔥 Exception or Error

./src/app/app.component.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded
    at /Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18
    at runMicrotasks ()
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

 [webpack-dev-middleware] RangeError: Maximum call stack size exceeded
     at InvokeFunctionExpr.visitExpression (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler/fesm2015/compiler.mjs:1616:20)
     at ExpressionTranslatorVisitor.visitInvokeFunctionExpr (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler-cli/bundles/chunk-IZWUTMTT.js:839:76)
     at InvokeFunctionExpr.visitExpression (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler/fesm2015/compiler.mjs:1617:24)
     at ExpressionTranslatorVisitor.visitInvokeFunctionExpr (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler-cli/bundles/chunk-IZWUTMTT.js:839:76)
     at InvokeFunctionExpr.visitExpression (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler/fesm2015/compiler.mjs:1617:24)
     at ExpressionTranslatorVisitor.visitInvokeFunctionExpr (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler-cli/bundles/chunk-IZWUTMTT.js:839:76)
     at InvokeFunctionExpr.visitExpression (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler/fesm2015/compiler.mjs:1617:24)
     at ExpressionTranslatorVisitor.visitInvokeFunctionExpr (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler-cli/bundles/chunk-IZWUTMTT.js:839:76)
     at InvokeFunctionExpr.visitExpression (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler/fesm2015/compiler.mjs:1617:24)
     at ExpressionTranslatorVisitor.visitInvokeFunctionExpr (file:///Users/jared.bates/Code/Frontend/call-stack-repro/node_modules/@angular/compiler-cli/bundles/chunk-IZWUTMTT.js:839:76)

🌍 Your Environment

Angular CLI: 13.3.2
Node: 16.14.2
Package Manager: npm 8.5.5
OS: darwin arm64

Angular: 13.3.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.2
@angular-devkit/build-angular   13.3.2
@angular-devkit/core            13.3.2
@angular-devkit/schematics      13.3.2
@schematics/angular             13.3.2
rxjs                            7.5.5
typescript                      4.6.3

Anything else relevant?

If I run node --stack-size=10000 ./node_modules/.bin/ng serve the program builds and serves just fine. However, this is obviously not an ideal solution.

[JoostK]

This is caused by #44994, which did indeed land in 13.2.3. We should probably limit the chaining depth to a certain maximum to avoid such deeply nested function calls.

@crisbeto FYI

[crisbeto]

I suspect that this has less to do with the fact that we're chaining and more that all our walker logic is based on recursion.

[JoostK]

Yeah that is pretty common as it's all visitors; the problem is how a linear sequence of elements (which is not susceptible to stack depth limits) becomes a nested hierarchy of call expressions (and therefore stack depth becomes a limitation due to the recursive nature of visitors)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}