javascript - STATUS_STACK_OVERFLOW error, cannot continue working (Angular) - Stack Overflow

admin管理员组

文章数量:1334401

Got this error in the console, tried to solve it with usual methods, but it didn't help.

STATUS_STACK_OVERFLOW. It's what's shown in the browser.

Below it's what's shown in the console. Any suggestions? I cannot solve it

ERROR RangeError: Maximum call stack size exceeded
    at LComponentView_RecipeListComponent.concat (<anonymous>)
    at cloneToLViewFromTViewBlueprint (core.js:6483)
    at createLView (core.js:7444)
    at addComponentLogic (core.js:8582)
    at instantiateAllDirectives (core.js:8415)
    at createDirectivesInstances (core.js:7784)
    at ɵɵelementStart (core.js:14528)
    at ɵɵelement (core.js:14579)
    at RecipeListComponent_Template (template.html:4)
    at executeTemplate (core.js:7757)
defaultErrorLogger @ core.js:4127
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.ErrorHandler.handleError @ core.js:4175
(anonymous) @ core.js:28820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:386
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:143
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgZone.runOutsideAngular @ core.js:28084
(anonymous) @ core.js:28820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:386
onInvoke @ core.js:28144
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:385
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:143
(anonymous) @ zone.js:891
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:28132
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:231
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:251
scheduleResolveOrReject @ zone.js:881
ZoneAwarePromise.then @ zone.js:1027
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:28741
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 RangeError: Maximum call stack size exceeded
    at LComponentView_RecipeListComponent.concat (<anonymous>)
    at cloneToLViewFromTViewBlueprint (core.js:6483)
    at createLView (core.js:7444)
    at addComponentLogic (core.js:8582)
    at instantiateAllDirectives (core.js:8415)
    at createDirectivesInstances (core.js:7784)
    at ɵɵelementStart (core.js:14528)
    at ɵɵelement (core.js:14579)
    at RecipeListComponent_Template (template.html:4)
    at executeTemplate (core.js:7757)

Got this error in the console, tried to solve it with usual methods, but it didn't help.

STATUS_STACK_OVERFLOW. It's what's shown in the browser.

Below it's what's shown in the console. Any suggestions? I cannot solve it

ERROR RangeError: Maximum call stack size exceeded
    at LComponentView_RecipeListComponent.concat (<anonymous>)
    at cloneToLViewFromTViewBlueprint (core.js:6483)
    at createLView (core.js:7444)
    at addComponentLogic (core.js:8582)
    at instantiateAllDirectives (core.js:8415)
    at createDirectivesInstances (core.js:7784)
    at ɵɵelementStart (core.js:14528)
    at ɵɵelement (core.js:14579)
    at RecipeListComponent_Template (template.html:4)
    at executeTemplate (core.js:7757)
defaultErrorLogger @ core.js:4127
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.ErrorHandler.handleError @ core.js:4175
(anonymous) @ core.js:28820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:386
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:143
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgZone.runOutsideAngular @ core.js:28084
(anonymous) @ core.js:28820
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:386
onInvoke @ core.js:28144
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:385
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:143
(anonymous) @ zone.js:891
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:28132
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:231
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:251
scheduleResolveOrReject @ zone.js:881
ZoneAwarePromise.then @ zone.js:1027
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:28741
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 RangeError: Maximum call stack size exceeded
    at LComponentView_RecipeListComponent.concat (<anonymous>)
    at cloneToLViewFromTViewBlueprint (core.js:6483)
    at createLView (core.js:7444)
    at addComponentLogic (core.js:8582)
    at instantiateAllDirectives (core.js:8415)
    at createDirectivesInstances (core.js:7784)
    at ɵɵelementStart (core.js:14528)
    at ɵɵelement (core.js:14579)
    at RecipeListComponent_Template (template.html:4)
    at executeTemplate (core.js:7757)

• javascript
• html
• css
• angular

Share Improve this question Follow edited Dec 17, 2020 at 9:54 Bashir 2,05155 gold badges2222 silver badges4747 bronze badges asked Dec 16, 2020 at 15:48 Alexander RomanyeyevAlexander Romanyeyev 4911 gold badge11 silver badge77 bronze badges 20

• Please include the code that caused this error. Also, STACK OVERFLOW. roll credits – M-Chen-3 Commented Dec 16, 2020 at 15:50
• Start your quest by checking what is on template.html line 4, and work you way back. Remark lines of code to check if the error disappears or changes. – Daantje Commented Dec 16, 2020 at 15:51
• Based on message 'Maximum call stack size exceeded', it seems you have problem with infinite loop or recursion. I suggest to go through createLView ponent and up, to locate this error. Hope this helps – Davit Mkrtchyan Commented Dec 16, 2020 at 15:55
• Okay, but the trick is also that I haven’t changed the files that you mentioned, but I will look – Alexander Romanyeyev Commented Dec 16, 2020 at 15:58
• <div class="col-md-5"> <app-recipe-list></app-recipe-list> </div> <div class="col-md-7"> <app-recipe-detail></app-recipe-detail> </div> – Alexander Romanyeyev Commented Dec 16, 2020 at 18:02

 |  Show 15 more ments

1 Answer 1

Sorted by: Reset to default 4

A very mon root cause for this is the use of a selector, within the same ponent template. It sounds really simple, but sometimes it is difficult to catch and can be time consuming.

Below is an example of what I mean for better clarity:

app.ponent.ts

 @Component({
    selector: "app-ponent",
    templateUrl: "app.ponent.html",
    styleUrls: ["app.ponent.css"]
 })

...

On the above ponent note that the selector is app-ponent and the template related to the app.ponent.ts is the app.ponent.html.

Now, if you were to put the selector within the actual HTML of the template, the browser window would crash with the STATUS_STACK_OVERFLOW error.

app.ponent.html

<div>
  <h2>Below notice the selector of the same ponent, which causes a 
  STATUS_STACK_OVERFLOW error</h2>
  
  <app-ponent></app-ponent>
</div>

I've seen people spending hours on errors like that, and frankly speaking these errors can be easily overlooked.

本文标签： javascriptSTATUSSTACKOVERFLOW errorcannot continue working (Angular)Stack Overflow