angular / angular/components

bug(MatDialog): Immediate navigation to a route after MatDialog is closed, crashes the Angular App / browser

Abierto
#28,066 5 comentarios 0 reacciones 0 asignados Ver en GitHub
cannot reproduce
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.