i18n hydration fails when multiple elements are inside an i18n tag #56176
Description
Which @angular/* package(s) are the source of the bug?
core, platform-browser
Is this a regression?
No
Description
When an i18n tag is placed on an Angular component that has multiple elements inside it, hydration throws an error.
For example:
@Component({
selector: 'app-text',
template: '<ng-content></ng-content>',
standalone: true,
})
export class TextComponent {}
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, TextComponent],
template: `
<app-text i18n>
Before
<br />
After
</app-text>
`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {}A runtime error is thrown (e.hasAttribute is not a function) during hydration.
In dev mode, this error is thrown as
ASSERTION ERROR: expected matching nodeType [Expected=> 3 == 1 <=Actual]
Please provide a link to a minimal reproduction of the bug
https://github.com/henry-alakazhang/hydration-form-repro
Please provide the exception or error you saw
In dev mode:
ASSERTION ERROR: expected matching nodeType [Expected=> 3 == 1 <=Actual]
### Please provide the environment you discovered this bug in (run `ng version`)
```true
Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: darwin arm64
Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cli 18.0.2
@angular/ssr 18.0.2
@schematics/angular 18.0.2
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6
Anything else?
Might be related to content projection on the Angular component, as this doesn't occur when nesting plain HTML elements, ie. this works:
<p i18n>
Before
<b/>
After
</p>
It also works with ng-container.
Thanks!