bug(MatDialog): Immediate navigation to a route after MatDialog is closed, crashes the Angular App / browser
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con il flusso MatDialog mostrato nella riproduzione: dialog.open, afterClosed, dialogRef.close('updateEmail') e la chiamata router.navigate successiva. Riproduci la sequenza di navigazione immediata nell'ambiente Angular 17; il lavoro è completato quando la chiusura della finestra di dialogo e la navigazione a /account/manage/profile non causano più l'arresto anomalo del browser.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 35/100