components: Uncaught RangeError: Maximum call stack size exceeded. angular 7
What is the expected behavior?
The expected behavior is to not have any errors
What is the current behavior?
for the last 2 months I get multiple errors in production and some time in development. I was ignoring this error but now I have this on production and I need to fix this, is so anoing.
Error
Uncaught RangeError: Maximum call stack size exceeded.
AND THIS
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in response to a mutation?
What are the steps to reproduce?
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
I can’t provide any code because I don’t know what is causing the errors, but I can tell you. I get that error if I open the sidenav or I open a menu,
If I try to debug this thing i come across to this.
function () {
var _this = this;
// Normally we wouldn't have to explicitly run this outside the `NgZone`, however
// if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will
// be patched to run inside the zone, which will throw us into an infinite loop.
this._ngZone.runOutsideAngular(function () {
// We can't remove the host here immediately, because the overlay pane's content
// might still be animating. This stream helps us avoid interrupting the animation
// by waiting for the pane to become empty.
/** @type {?} */
var subscription = _this._ngZone.onStable
.asObservable()
.pipe(takeUntil(merge(_this._attachments, _this._detachments)))
.subscribe(function () {
// Needs a couple of checks for the pane and host, because
// they may have been removed by the time the zone stabilizes.
if (!_this._pane || !_this._host || _this._pane.children.length === 0) {
if (_this._pane && _this._config.panelClass) {
_this._toggleClasses(_this._pane, _this._config.panelClass, false);
}
if (_this._host && _this._host.parentElement) {
_this._previousHostParent = _this._host.parentElement;
_this._previousHostParent.removeChild(_this._host);
}
subscription.unsubscribe();
}
});
});
};
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular CLI: 7.3.0
Node: 10.14.2
OS: win32 x64
Angular: 7.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.0
@angular-devkit/build-angular 0.13.0
@angular-devkit/build-optimizer 0.13.0
@angular-devkit/build-webpack 0.13.0
@angular-devkit/core 7.3.0
@angular-devkit/schematics 7.3.0
@angular/cdk 7.3.1
@angular/cli 7.3.0
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.3.1
@ngtools/webpack 7.3.0
@schematics/angular 7.3.0
@schematics/update 0.13.0
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
Is there anything else we should know?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (6 by maintainers)
Also, you can look at this https://github.com/angular/material2/issues/12686. issue.
This issue is similar to my