Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
When using ng-template to project content like this:
@if (isExternal) {
<a
#anchorRef
[href]="link"
>
<ng-template [ngTemplateOutlet]="contentTemplateRef"></ng-template>
</a>
}
@if (!isExternal) {
<a
#anchorRef
[routerLink]="link"
>
<ng-template [ngTemplateOutlet]="contentTemplateRef"></ng-template>
</a>
}
<ng-template #contentTemplateRef>
<lib-button-content>
<ng-content></ng-content>
</lib-button-content>
</ng-template>
errors are thrown in the console, and the page fails to render properly. It renders content outside of its component entirely, as seen in this image:
Notice that the first anchor is actually rendered properly (not sure if it's still throwing and error since two errors are thrown, and there are two anchor component usages).
If you remove the either the wrapping p (in app component) or div element (in button-content component) it works as it should, and no errors are thrown.
Please provide a link to a minimal reproduction of the bug
https://github.com/chriswoodie/angular-repro/tree/bug/hydration-ng-template
Please provide the exception or error you saw
main-ULJQ6C5J.js:7 ERROR TypeError: Cannot read properties of null (reading 'firstChild')
at Ny (main-ULJQ6C5J.js:7:62100)
at Ry (main-ULJQ6C5J.js:7:62300)
at Vo (main-ULJQ6C5J.js:7:61627)
at uD (main-ULJQ6C5J.js:7:70731)
at _a (main-ULJQ6C5J.js:7:70562)
at template (main-ULJQ6C5J.js:8:88918)
at Wd (main-ULJQ6C5J.js:7:38081)
at Da (main-ULJQ6C5J.js:7:55868)
at gy (main-ULJQ6C5J.js:7:55676)
at vy (main-ULJQ6C5J.js:7:56185)
handleError @ main-ULJQ6C5J.js:7
(anonymous) @ main-ULJQ6C5J.js:7
invoke @ polyfills-LZBJRJJE.js:1
run @ polyfills-LZBJRJJE.js:1
runOutsideAngular @ main-ULJQ6C5J.js:7
(anonymous) @ main-ULJQ6C5J.js:7
invoke @ polyfills-LZBJRJJE.js:1
onInvoke @ main-ULJQ6C5J.js:7
invoke @ polyfills-LZBJRJJE.js:1
run @ polyfills-LZBJRJJE.js:1
(anonymous) @ polyfills-LZBJRJJE.js:2
invokeTask @ polyfills-LZBJRJJE.js:1
onInvokeTask @ main-ULJQ6C5J.js:7
invokeTask @ polyfills-LZBJRJJE.js:1
runTask @ polyfills-LZBJRJJE.js:1
E @ polyfills-LZBJRJJE.js:1
Promise.then (async)
q @ polyfills-LZBJRJJE.js:1
R @ polyfills-LZBJRJJE.js:1
scheduleTask @ polyfills-LZBJRJJE.js:1
onScheduleTask @ polyfills-LZBJRJJE.js:1
scheduleTask @ polyfills-LZBJRJJE.js:1
scheduleTask @ polyfills-LZBJRJJE.js:1
scheduleMicroTask @ polyfills-LZBJRJJE.js:1
Q @ polyfills-LZBJRJJE.js:2
then @ polyfills-LZBJRJJE.js:2
runInitializers @ main-ULJQ6C5J.js:7
(anonymous) @ main-ULJQ6C5J.js:7
mD @ main-ULJQ6C5J.js:7
(anonymous) @ main-ULJQ6C5J.js:7
invoke @ polyfills-LZBJRJJE.js:1
onInvoke @ main-ULJQ6C5J.js:7
invoke @ polyfills-LZBJRJJE.js:1
run @ polyfills-LZBJRJJE.js:1
run @ main-ULJQ6C5J.js:7
Nf @ main-ULJQ6C5J.js:7
sh @ main-ULJQ6C5J.js:8
(anonymous) @ main-ULJQ6C5J.js:8
main-ULJQ6C5J.js:8 TypeError: Cannot read properties of null (reading 'firstChild')
at Ny (main-ULJQ6C5J.js:7:62100)
at Ry (main-ULJQ6C5J.js:7:62300)
at Vo (main-ULJQ6C5J.js:7:61627)
at uD (main-ULJQ6C5J.js:7:70731)
at _a (main-ULJQ6C5J.js:7:70562)
at template (main-ULJQ6C5J.js:8:88918)
at Wd (main-ULJQ6C5J.js:7:38081)
at Da (main-ULJQ6C5J.js:7:55868)
at gy (main-ULJQ6C5J.js:7:55676)
at vy (main-ULJQ6C5J.js:7:56185)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.0.7
Node: 20.10.0
Package Manager: npm 10.2.3
OS: darwin x64
Angular: 17.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.7
@angular-devkit/build-angular 17.0.7
@angular-devkit/core 17.0.7
@angular-devkit/schematics 17.0.7
@schematics/angular 17.0.7
ng-packagr 17.0.2
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2
Anything else?
Possibly related to #53270 and/or #53304.
Despite these being released with v17.0.6 I still experience this bug in v17.0.7.
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
When using
ng-templateto project content like this:errors are thrown in the console, and the page fails to render properly. It renders content outside of its component entirely, as seen in this image:
Notice that the first anchor is actually rendered properly (not sure if it's still throwing and error since two errors are thrown, and there are two anchor component usages).
If you remove the either the wrapping
p(in app component) ordivelement (in button-content component) it works as it should, and no errors are thrown.Please provide a link to a minimal reproduction of the bug
https://github.com/chriswoodie/angular-repro/tree/bug/hydration-ng-template
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version)Anything else?
Possibly related to #53270 and/or #53304.
Despite these being released with v17.0.6 I still experience this bug in v17.0.7.