bug(HMR + @boundary): template error boundaries disappear with HMR refresh
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 55/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- angular, typescript
- 领域
- frontend
调研方向
从链接的 StackBlitz 复现项目中的 src/main.ts 开始,比较 @boundary 示例的初始渲染与模板或样式经过 HMR 刷新后的行为。使用 RiskyComponent 中硬编码的 Error 重现故障;当 boundary 的 fallback 保持可见,同时 boundary 外部的内容不变时,即表示完成。
由索引模型根据 Issue 内容生成。
描述
Which @angular/* package(s) are the source of the bug?
core, Don't known / other
Is this a regression?
Yes
Description
The new error boundaries (@boundary) coming to v22.2.0 in developer preview are neat, but I believe I found a bug with template boundaries and HMR.
In the documentation page, the first example block is the following (but for this example I added a <p> tag outside the boundary for reference):
@boundary {
<app-risky-component />
} @error {
<p>Something went wrong!</p>
}
<p>Outside of boundary</p>
I have hardcoded the risky component to always throw an Error, so you only see the @error fallback content.
export class RiskyComponent {
constructor() {
throw new Error('forced error');
}
}
If you are serving the app with HMR and you make an HMR change like to the template or style declaration:
- The boundary block content disappears
- BUT the content outside of the boundary block, like
<p>Outside of the boundary</p>, is just fine.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-td3er4br?file=src%2Fmain.ts
Please provide the exception or error you saw
`@boundary` template block disappears upon HMR refresh.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 22.2.0-next.6
Angular : 22.2.0-next.7
Node.js : 22.22.3
Package Manager : npm 10.8.2
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 22.2.0-next.6 │ ^22.2.0-next.6 │
│ @angular/cli │ 22.2.0-next.6 │ ^22.2.0-next.6 │
│ @angular/common │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ @angular/compiler │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ @angular/compiler-cli │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ @angular/core │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ @angular/forms │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ @angular/platform-browser │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ @angular/router │ 22.2.0-next.7 │ ^22.2.0-next.7 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 6.0.3 │ ^6.0.3 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
I tend to overthink edge cases going into issues, but I am trying to not do so currently lol. I have some edge cases in mind I may try out and bring up. If I do, I will edit those into this block with notes, or just cross them out.
My todo to check:
- Reset (will always fail with hardcoded error)
- Reset (random chance to actually not throw error)
- Dynamic views, and their variants with the types of reset cases above
- 主要语言
- TypeScript
- 星标
- 101k
- 派生
- 28.1k
- 平均合并
- 2 天 6 小时
- 30 天内合并 PR
- 307
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
angular/angular 的其他 Issue
-
area: docs
难度 2/5 1-3 小时 新手友好度 76/100
-
area: forms forms: signals
难度 2/5 1-3 小时 新手友好度 78/100
-
area: docs gemini-triaged
难度 2/5 1-3 小时 新手友好度 70/100
-
area: forms forms: signals
难度 2/5 1-3 小时 新手友好度 68/100
-
area: docs area: forms
难度 2/5 1-3 小时 新手友好度 76/100
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 75/100
vercel-labs/just-bash#464 ·
-
looksLikeSlug() is ASCII-only, so non-Latin entity slugs (e.g. Korean) skip exact match and collapse 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
-
难度 2/5 1-3 小时 新手友好度 65/100
-
难度 2/5 1-3 小时 新手友好度 65/100
-
难度 1/5 1 小时以内 新手友好度 90/100
TanStack/tanstack.com#1293 ·