-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
Comments
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 |
@George35mk are you using |
@crisbeto thanks, but I don't have any dependency with name zone-patch-rxjs |
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>
|
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:
if I hover the mouse on this._host a popup shows that is the I am 99% there is the problem but I don't know how I can fix this |
also, I found this issue: |
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-listwhere 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? |
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:
I fixe this issue on the step 3 login.component.tsbeforethis._router.navigate(['/dashboard']); afterthis._router.navigate(['/dashboard']);
window.location.reload(); For some unknown reason this fix the problem, I dont know why, but works. |
Closing the issue since it looks like the problem was resolved. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
The text was updated successfully, but these errors were encountered: