园子博客后台从 angular 15 升级到 angular 19(ng-zorro-antd 也升级到了 19)后,遇到一个奇怪问题,关闭模态对话框后执行 router.navigate,Chrome 会出现如下的额 "Aw, Snap! Error code: 5" 错误:
对应的代码如下
const modalRef = await this.tagEditModalService.open(tagToEdit);
modalRef.afterClose.pipe(take(1)).subscribe(value =>
this.router.navigate([], {
queryParams: {
edit: null,
t: value === true ? Date.now() : null,
page:
value === true && tagId <= 0
? 1
: this.route.snapshot.queryParams.page,
orderBy:
tagId <= 0
? 'createTime desc'
: this.route.snapshot.queryParams.orderBy,
},
queryParamsHandling: 'merge',
relativeTo: this.route,
})
);
其他关闭模态对话框后执行 router.navigate 的地方也会出现这个问题
模态对话框的打开是通过针对 /tags?edit=-1
的路由触发的
问题与 this.router.navigate
没有关系,关闭模态对话框后,点击页面中的任何路由链接都出现这个问题
TagEditModalService 对应的实现代码
export class TagEditModalService {
constructor(
private readonly _nzModalService: NzModalService,
) { }
async open(tag?: PostTagDto) {
const isCreatingTag = tag == null;
return this._nzModalService.create({
nzTitle: isCreatingTag ? '新建标签' : '编辑标签',
nzOkText: isCreatingTag ? '新建' : '保存',
nzContent: TagEditModalContentComponent,
nzData: tag,
});
}
}
换成 angular material 的 MatDialog 也是同样的的问题,应该是 angular cdk 的问题
export class TagsMainComponent implements OnInit {
constructor(private readonly matDialog: MatDialog) { }
ngOnInit() {
const config: MatDialogConfig = {
width: '600px',
};
this.matDialog.open(TagEditModalContentComponent, config);
}
}
在 https://github.com/angular/components/issues/28066 的评论中找到一个 workaround —— 采用 NoopScrollStrategy
MatDialog 可以用这个变通方法解决
const config: MatDialogConfig = {
width: '600px',
scrollStrategy: new NoopScrollStrategy()
};
this.matDialog.open(TagEditModalContentComponent, config);
但 NzModalService 硬编码了 scrollStrategy,没法采用这个解决方法
private createOverlay(config: ModalOptions): OverlayRef {
//...
const overlayConfig = new OverlayConfig({
scrollStrategy: this.overlay.scrollStrategies.block(),
//...
});
return this.overlay.create(overlayConfig);
}
是升级过程中在路由配置中添加 withViewTransitions
引起的,去掉这个配置就没这个问题了
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(
routes,
withRouterConfig({
onSameUrlNavigation: 'reload'
}),
withPreloading(NoPreloading),
withViewTransitions() // 这行代码引起的
)
]
}
How to determine what is causing Chrome to show the "Aw, Snap" dialogue
– dudu 4周前bug(mat-select): mat-select multiple crashes Chrome
– dudu 4周前