bug(MatDialog): Immediate navigation to a route after MatDialog is closed, crashes the Angular App / browser
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Is this a regression?
- [X] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
I am loading a dialog to ask user to verify email. On the dialog there's also a link which can be clicked in case user wants to update their email. As soon as the user click Update Email link and dialog is closed the browser tab crashes and Chrome display `Aw, Snap! error`
### Reproduction
I am loading a dialog to ask user to verify email. On the dialog there's also a link which can be clicked in case user wants to update their email.
```
import('./verify-email-dialog.component').then((c) => {
let config = new MatDialogConfig();
config.viewContainerRef = this.viewContainerRef;
config.disableClose = true;
config.panelClass = "header-pattern";
this.dialogRef = this.dialog.open(c.VerifyEmailDialog, config);
this.dialogRef.afterClosed().subscribe(result => {
if (result == 'updateEmail') {
this._router.navigate(['/account/manage/profile']);
return;
}
if (result === true) {
this.emailConfirmed = true;
}
});
});
```
Below is how I am closing dialog in case user click Update Email link in `VerifyEmailDialog`:
```
updateEmail() {
this.dialogRef.close('updateEmail');
}
```
As soon as the user click Update Email link and dialog is closed the browser tab crashes and Chrome display `Aw, Snap! error`
### Expected Behavior
it should work smoothly
### Actual Behavior
The browser crashes
### Environment
Angular CLI: 17.0.0-rc.4
Node: 18.18.2
Package Manager: npm 9.8.1
OS: win32 x64
Angular: 17.0.0-rc.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... google-maps, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.0-rc.4
@angular-devkit/build-angular 17.0.0-rc.4
@angular-devkit/core 17.0.0-rc.4
@angular-devkit/schematics 17.0.0-rc.4
@angular/cli 17.0.0-rc.4
@angular/fire 16.0.0
@angular/pwa 17.0.0-rc.4
@schematics/angular 17.0.0-rc.4
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.0
コントリビューションガイド
調査の方向性
再現で示されている MatDialog フローから始めます: dialog.open、afterClosed、dialogRef.close('updateEmail')、およびそれに続く router.navigate 呼び出しです。Angular 17 環境で即時ナビゲーションのシーケンスを再現します。ダイアログを閉じて /account/manage/profile にナビゲートしてもブラウザーがクラッシュしなくなれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 35/100