bug(MatDialog): Immediate navigation to a route after MatDialog is closed, crashes the Angular App / browser
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginnen Sie mit dem im Reproduktionsbeispiel gezeigten MatDialog-Ablauf: dialog.open, afterClosed, dialogRef.close('updateEmail') und dem anschließenden router.navigate-Aufruf. Reproduzieren Sie die Sequenz der unmittelbaren Navigation in der Angular 17-Umgebung; abgeschlossen ist die Aufgabe, wenn das Schließen des Dialogs und die Navigation zu /account/manage/profile den Browser nicht mehr zum Absturz bringen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 35/100