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?

1

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)

Most upvoted comments

Also, you can look at this https://github.com/angular/material2/issues/12686. issue.

This issue is similar to my