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
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):I have hardcoded the risky component to always throw an
Error, so you only see the@errorfallback content.If you are serving the app with HMR and you make an HMR change like to the template or style declaration:
<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
Please provide the environment you discovered this bug in (run
ng version)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: