Skip to content

Uncaught RangeError: Maximum call stack size exceeded. angular 7 #15231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ghost opened this issue Feb 19, 2019 · 16 comments
Closed

Uncaught RangeError: Maximum call stack size exceeded. angular 7 #15231

ghost opened this issue Feb 19, 2019 · 16 comments

Comments

@ghost
Copy link

ghost commented Feb 19, 2019

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?

@julianobrasil
Copy link
Contributor

julianobrasil commented Feb 19, 2019

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

@ghost
Copy link
Author

ghost commented Feb 19, 2019

@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.

@ghost
Copy link
Author

ghost commented Feb 19, 2019

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

This issue is similar to my

@crisbeto
Copy link
Member

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

@ghost
Copy link
Author

ghost commented Feb 20, 2019

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

@crisbeto
Copy link
Member

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.

@ghost
Copy link
Author

ghost commented Feb 20, 2019

@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
Copy link
Contributor

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.

@ghost
Copy link
Author

ghost commented Feb 20, 2019

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

2

@ghost
Copy link
Author

ghost commented Feb 20, 2019

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

@ghost
Copy link
Author

ghost commented Feb 20, 2019

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>

@ghost
Copy link
Author

ghost commented Feb 20, 2019

@julianobrasil @crisbeto what you thing?

@julianobrasil
Copy link
Contributor

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.

@ghost
Copy link
Author

ghost commented Mar 18, 2019

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
    1. 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)
    1. then when the user is authenticated I redirect the user to the dashboard.
    1. 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
Copy link
Member

crisbeto commented Apr 6, 2019

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

@crisbeto crisbeto closed this as completed Apr 6, 2019
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants