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?

[julianobrasil]

I guess it's something with your code... not an obvious thing, maybe you're setting some control value that fires some event that set the control value again... anyway it doesn't seem to be related to any bug in material, as nobody else is complaining about it (it's huge and we'd get a lot of issues if this was an error in the library). In that case, you should post your question on stackoverflow.com

@julianobrasil, I have already posted on stack overflow days ago.

The problem is that the app is too big to check if is in my code, but as far I remember, this problem vanishes if I comment the mat-sidenav code or the mat-menu code, I dont have any form-controls there.

but I will check again for controls that fire that events.

Thanks for looking on this.

Also, you can look at this #12686. issue.

This issue is similar to my

[crisbeto]

@George35mk are you using zone-patch-rxjs and does the issue go away if you disable it?

@crisbeto thanks, but I don't have any dependency with name zone-patch-rxjs

[crisbeto]

Then it's not the same issue as #12686. It would be helpful to know which Material components you're using on the page that's failing.

@crisbeto this is the code I use.

package.json

{
  "name": "apps",
  "version": "1.3.5",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.3.1",
    "@angular/common": "~7.2.3",
    "@angular/compiler": "~7.2.3",
    "@angular/core": "^7.2.3",
    "@angular/flex-layout": "^7.0.0-beta.23",
    "@angular/forms": "^7.2.3",
    "@angular/http": "^7.2.3",
    "@angular/material": "^7.3.1",
    "@angular/platform-browser": "^7.2.3",
    "@angular/platform-browser-dynamic": "^7.2.3",
    "@angular/router": "^7.2.3",
    "@ngx-progressbar/core": "^5.3.1",
    "angular-draggable-droppable": "^4.0.2",
    "core-js": "^2.5.4",
    "elasticlunr": "^0.9.5",
    "element-resize-event": "^3.0.3",
    "google-palette": "^1.1.0",
    "hammerjs": "^2.0.8",
    "moment": "^2.23.0",
    "ng2-truncate": "^1.3.17",
    "rxjs": "~6.4.0",
    "terser": "^3.16.1",
    "tslib": "^1.9.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.0",
    "@angular/cli": "^7.3.0",
    "@angular/compiler-cli": "^7.2.3",
    "@angular/language-service": "^7.2.3",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "^3.3.8",
    "@types/jasminewd2": "^2.0.6",
    "@types/moment": "^2.13.0",
    "@types/node": "~10.12.21",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "ts-node": "~8.0.2",
    "tslint": "~5.12.1",
    "typescript": "3.2.4"
  }
}

This is the code of the dashboard page

<div [class.dark-theme]="isDarkTheme">

  <app-header [main_sidenav]="mainSidenav" [notificationsSidenav]="notificationsPanel" style="margin-bottom:4px;"></app-header>
  <ng-progress #progressBar [color]="'dodgerblue'" [spinner]="false"></ng-progress>

  <mat-sidenav-container hasBackdrop="true" style="height: calc(100vh - 50px);">

    <mat-sidenav #mainSidenav position="start" opened="false" mode="over">
      <app-sidenav></app-sidenav>
    </mat-sidenav>

    <mat-sidenav #notificationsPanel position="end" opened="false">
      <app-notifications *ngIf="notificationsPanel" [sidenav]="notificationsPanel"></app-notifications>
    </mat-sidenav>

    <mat-sidenav-content>

      <div>
        <div fxLayout="row" style="height: 100%;">

          <div class="main_container backGround" style="overflow: hidden; height: 100%;">

            <div class="main_container_toolbar">
              <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px" style="padding: 0px 20px; height: 64px;">
                <mat-icon style="color:dodgerblue;">dashboard</mat-icon>
                <h4 style="margin: 0px;">Dashboard</h4>

                <span class="spacer"></span>
                <button *ngIf="!customise" mat-button class="btn_customise_start" (click)="onCustomiseStart();">
                  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
                    <mat-icon class="customise_btn_icon">edit</mat-icon>
                    <span class="customise_btn_text">CUSTOMISE</span>
                  </div>
                </button>

                <button *ngIf="customise" mat-button class="btn_customise_done" (click)="onCustomiseDone();">
                  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
                    <mat-icon class="done_btn_icon">done</mat-icon>
                    <span class="done_btn_text">DONE</span>
                  </div>
                </button>
              </div>
            </div>

            <mat-divider></mat-divider>

            <div class="widgets_container" style="overflow: auto; height: calc(100vh - 115px);" (scroll)="onElementScroll($event)">

              <div *ngIf="userHasStores" @fadeInOut>
                <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
                  <div fxFlex.xs=100 fxFlex.sm=100 fxFlex.md=100 fxFlex.lg=90 fxFlex.xl=90 style="padding: 20px; padding-top:50px;">
                    <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutAlign="center start" fxLayoutGap="0px">


                      <div fxFlex="33" [ngStyle.xs]="{'width': '100%'}" [ngStyle.sm]="{'width': '100%'}"
                        cdkDropList
                        #list1="cdkDropList"
                        [cdkDropListData]="buckets?.bucket1"
                        [cdkDropListConnectedTo]="[list2, list3]"
                        class="example-list"
                        (cdkDropListDropped)="drop($event)"
                        style="padding: 10px;">

                        <div class="example-box" [class.mat-elevation-z2]=true *ngFor="let item of buckets?.bucket1"
                          [style.margin-bottom]="item?.visible || customise ? '20px' : '0px'"
                          (cdkDragMoved)="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)" [cdkDragDisabled]="!customise" cdkDrag>
                          <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                          <div *ngIf="item?.visible && customise_done || customise" class="forGround" style="width: 100%;">
                            <app-widget [data]="item" [customise]=customise [collapse]="customise"
                            (onhide)="onWidgetHide($event);" style="width: 100%;"></app-widget>
                          </div>
                        </div>
                      </div>


                      <div fxFlex="33" [ngStyle.xs]="{'width': '100%'}" [ngStyle.sm]="{'width': '100%'}"
                        cdkDropList
                        #list2="cdkDropList"
                        [cdkDropListData]="buckets?.bucket2"
                        [cdkDropListConnectedTo]="[list1, list3]"
                        class="example-list"
                        (cdkDropListDropped)="drop($event)">

                        <div class="example-box" [class.mat-elevation-z2]=true *ngFor="let item of buckets?.bucket2"
                          [style.margin-bottom]="item?.visible || customise ? '20px' : '0px'"
                          (cdkDragMoved)="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)" [cdkDragDisabled]="!customise" cdkDrag>
                          <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                          <div *ngIf="item?.visible && customise_done || customise" class="forGround" style="width: 100%;">
                            <app-widget [data]="item" [customise]=customise [collapse]="customise"
                            (onhide)="onWidgetHide($event);" style="width: 100%;"></app-widget>
                          </div>
                        </div>
                      </div>


                      <div fxFlex="33" [ngStyle.xs]="{'width': '100%'}" [ngStyle.sm]="{'width': '100%'}"
                        cdkDropList
                        #list3="cdkDropList"
                        [cdkDropListData]="buckets?.bucket3"
                        [cdkDropListConnectedTo]="[list1, list2]"
                        class="example-list"
                        (cdkDropListDropped)="drop($event)">

                        <div class="example-box" [class.mat-elevation-z2]=true *ngFor="let item of buckets?.bucket3"
                          [style.margin-bottom]="(item?.visible || customise) ? '20px' : '0px'"
                          (cdkDragMoved)="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)" [cdkDragDisabled]="!customise" cdkDrag>
                          <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                          <div *ngIf="item?.visible && customise_done || customise" class="forGround" style="width: 100%;">
                            <app-widget [data]="item" [customise]=customise [collapse]="customise"
                            (onhide)="onWidgetHide($event);" style="width: 100%;"></app-widget>
                          </div>
                        </div>
                      </div>


                    </div>
                  </div>
                </div>
              </div>

              <div *ngIf=showSelectStoresBtn style="height:100%;">
                <button mat-stroked-button color="primary" (click)="openStoreSelectionDialog();" class="show_dialog_btn">
                  SELECT STORES
                </button>
              </div>

            </div>

          </div>
        </div>
      </div>


    </mat-sidenav-content>
  </mat-sidenav-container>

</div>

app-sidenav

<div class="sidenav_menu_left box_shadow_soft" [@onSideNavChange]="sideNavState" fxLayout="column" [style.overflow]="overflowState">


  <mat-nav-list class="nav_list">
    <mat-list-item *ngFor="let page of pages" class="customer_home_item inactive_state"
      matTooltip="{{page?.name}}" matTooltipShowDelay="1000"
      routerLink="{{page?.link}}" routerLinkActive="active_link" [routerLinkActiveOptions]="{exact:true}">
      <a matLin>
        <div fxLayout="row" fxLayoutAlign="center center">
          <mat-icon [@onIconChange]="sideNavIcon" class="home_icon collapse-icon vcenter" mat-list-icon>{{page?.icon}}</mat-icon>
          <span [@onTextChange]="sideNavText">{{page?.name}}</span>
        </div>
      </a>
    </mat-list-item>
  </mat-nav-list>


  <!-- This toggle the sidenav -->
  <div fxFlex="100" (click)="toggleSideNav();" class="hoverble"></div>

  <div class="sidenav_footer">
    <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px" style="padding:10px;">

      <div [@onCopyrightChange]="sideNavCopyRight" fxFlex="100">
        <div style="margin-bottom: 5px;">
          <a href="https://www.multipay.nl" target="_blank" class="terms_of_service">Technologies AG Copyright © 2018</a>
        </div>
        <div class="build_version_text">Build version {{version}}</div>
      </div>

      <div class="spacer"></div>

      <div fxFlex="40px">
        <button  mat-icon-button (click)="toggleSideNav();">
          <mat-icon style="color: #b7b7b7;" *ngIf="sideNavState === 'close'" matTooltip="Open" matTooltipShowDelay="1000">chevron_right</mat-icon>
          <mat-icon style="color: #b7b7b7;" *ngIf="sideNavState === 'open'" matTooltip="Close" matTooltipShowDelay="1000">chevron_left</mat-icon>
        </button>
      </div>
    </div>
  </div>

</div>

app-header

<!-- [@onScrollShadow]="elevation ? 'true' : 'false'" -->
<div class="toolbar backGround" [class.mat-elevation-z3]="true">

  <div class="toolbar_container" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px" style="padding:5px 10px; width: 100%;">

    <button mat-icon-button class="menu_button" (click)="main_sidenav.toggle();">
      <mat-icon>menu</mat-icon>
    </button>

    <span class="app_title">Analytics</span>

    <span class="spacer"></span>

    <button mat-button class="btn_open_store_selection" (click)="openStoreSelectionDialog()">
      <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px">
        <mat-icon style="color: #777777; font-size: 20px; height: 20px; width: 20px;">store</mat-icon>
        <span>My Stores</span>
        <mat-icon>arrow_drop_down</mat-icon>
      </div>
    </button>

    <button mat-icon-button class="mat-18 btn_notifications" (click)="notificationsSidenav?.toggle();">
      <mat-icon style="color: #6b6b6b;">notifications</mat-icon>
    </button>

    <div class="username_first_char" [matMenuTriggerFor]="dropDownPanel">{{userIcon}}</div>
    <mat-menu class="user_menu_panel" #dropDownPanel x-position="before">

      <div *ngIf="user" class="user_menu_panel_content">
        <div class="user_menu_panel_content_header">
          <div fxLayout="row" fxLayoutAlign="start center">
            <div fxFlex="75px">
              <div class="user_icon">
                <span class="user_first_char">{{userIcon}}</span>
              </div>
            </div>
            <div fxFlex="100">
              <div style="font-weight: 600; font-size: 14px;">{{user?.userInfo?.name}}</div>
              <div style="font-weight: 400; font-size: 14px;">{{user?.userInfo?.email}}</div>
            </div>
          </div>
        </div>

        <div class="user_menu_panel_content_body">
          <mat-nav-list>

            <mat-list-item class="btn_toggle_theme" (click)="toggleTheme();">
              <mat-icon matListIcon>brightness_medium</mat-icon>
              <h3 matLine> </h3>
              <p matLine>
                <span *ngIf="isDarkTheme"> Dark theme off</span>
                <span *ngIf="!isDarkTheme"> Dark theme on</span>
              </p>
            </mat-list-item>

            <mat-list-item class="btn_before_log_out" (click)="beforeLogOut()">
              <mat-icon matListIcon>exit_to_app</mat-icon>
              <h3 matLine> </h3>
              <p matLine>
                <span>Log out</span>
              </p>
            </mat-list-item>

          </mat-nav-list>
        </div>
      </div>

    </mat-menu>
  </div>

</div>

[julianobrasil]

Wow, that's a lot of code in that comment 😄.

Do you think you manage to build a working example on stackblitz to reproduce the issue? (I suppose that just copying and pasting your code there is not enough to get it up and running). Also paste the stackoverflow link to the question.

Inside the overlay.es5.js

on the line 1544

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); <-------- this is line complains about 
                    }
                    subscription.unsubscribe();
                }

the error says:

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?

if I hover the mouse on this._host a popup shows that is the div.cdk-overlay-connected-position-bound

I am 99% there is the problem but I don't know how I can fix this

also, I found this issue:
#12972 maybe is related

One more thing I have found is this.

I removed the mat-tooltip from the mat-list-item and this solved my problem on the sidenav component.

so I believe, this combo that causing this errors

<mat-nav-list class="nav_list">
    <mat-list-item *ngFor="let page of pages" class="customer_home_item inactive_state"
      matTooltip="{{page?.name}}" matTooltipShowDelay="1000"  <-------- this line
      routerLink="{{page?.link}}" routerLinkActive="active_link" [routerLinkActiveOptions]="{exact:true}">
      <a matLin>
        <div fxLayout="row" fxLayoutAlign="center center">
          <mat-icon [@onIconChange]="sideNavIcon" class="home_icon collapse-icon vcenter" mat-list-icon>{{page?.icon}}</mat-icon>
          <span [@onTextChange]="sideNavText">{{page?.name}}</span>
        </div>
      </a>
    </mat-list-item>
  </mat-nav-list>

And i fixed by removing the matToolTip

<mat-nav-list class="nav_list">
    <mat-list-item *ngFor="let page of pages" class="customer_home_item inactive_state"
      routerLink="{{page?.link}}" routerLinkActive="active_link" [routerLinkActiveOptions]="{exact:true}">
      <a matLin>
        <div fxLayout="row" fxLayoutAlign="center center">
          <mat-icon [@onIconChange]="sideNavIcon" class="home_icon collapse-icon vcenter" mat-list-icon>{{page?.icon}}</mat-icon>
          <span [@onTextChange]="sideNavText">{{page?.name}}</span>
        </div>
      </a>
    </mat-list-item>
  </mat-nav-list>

Now in the header.component I have a mat-menu . if I hover the mouse on the mat-list

where is inside the mat-menu I get the error I have described.

the only problem now is that I don't have any tooltip there!!!

The code that triggers the errors

<div class="username_first_char" [matMenuTriggerFor]="dropDownPanel">{{userIcon}}</div>
    <mat-menu class="user_menu_panel" #dropDownPanel x-position="before">

      <div *ngIf="user" class="user_menu_panel_content">
        <div class="user_menu_panel_content_header">
          <div fxLayout="row" fxLayoutAlign="start center">
            <div fxFlex="75px">
              <div class="user_icon">
                <span class="user_first_char">{{userIcon}}</span>
              </div>
            </div>
            <div fxFlex="100">
              <div style="font-weight: 600; font-size: 14px;">{{user?.userInfo?.name}}</div>
              <div style="font-weight: 400; font-size: 14px;">{{user?.userInfo?.email}}</div>
            </div>
          </div>
        </div>

        <div class="user_menu_panel_content_body">
          <mat-nav-list>

            <mat-list-item class="btn_toggle_theme" (click)="toggleTheme();">
              <mat-icon matListIcon>brightness_medium</mat-icon>
              <h3 matLine> </h3>
              <p matLine>
                <span *ngIf="isDarkTheme"> Dark theme off</span>
                <span *ngIf="!isDarkTheme"> Dark theme on</span>
              </p>
            </mat-list-item>

            <mat-list-item class="btn_before_log_out" (click)="beforeLogOut()">
              <mat-icon matListIcon>exit_to_app</mat-icon>
              <h3 matLine> </h3>
              <p matLine>
                <span>Log out</span>
              </p>
            </mat-list-item>

          </mat-nav-list>
        </div>
      </div>

    </mat-menu>

@julianobrasil @crisbeto what you thing?

[julianobrasil]

I'm not near a computer right now, but I'll take a look later. Have you try a minimum setup including a menu and a tooltip on stackblitz.

ok I solved but I want to say that I get this error after the login process succeed

The exact steps to reproduce this issue was like this:

• 1. the user has visited my web app for example https://myapp/dashboard
• 2. then the auth.guard check if the user is authenticated because the user is not authenticated I redirect the user to the login page (https://myapp/login)
• 3. then when the user is authenticated I redirect the user to the dashboard.
• 4. the user now is in the https://myapp/dashboard and in the dashboard, I get 1 million errors 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?

I fixe this issue on the step 3

login.component.ts

before

this._router.navigate(['/dashboard']);

after

this._router.navigate(['/dashboard']);
window.location.reload();

For some unknown reason this fix the problem, I dont know why, but works.

[crisbeto]

Closing the issue since it looks like the problem was resolved.