bug(MatDialog): Immediate navigation to a route after MatDialog is closed, crashes the Angular App / browser
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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
Guía de contribución
Línea de trabajo
Comienza con el flujo de MatDialog mostrado en la reproducción: dialog.open, afterClosed, dialogRef.close('updateEmail') y la llamada posterior a router.navigate. Reproduce la secuencia de navegación inmediata en el entorno de Angular 17; la tarea estará completada cuando cerrar el diálogo y navegar a /account/manage/profile ya no provoque que el navegador se bloquee.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 35/100