Rehydration doesn't work with throw error el.setAttribute is not a function in Angular 16 rc.1 #49849
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
When we enable provideClientHydration(withNoHttpTransferCache()) option in AppModule and check ssr hydration result, I got some error which is unhandled by NG0XXX error code.
I don't know how to reproduce this error in stackblitz yet.
But hope it could be helpful if we provide callstack for error message first.
Here is the error callstack.
Please provide a link to a minimal reproduction of the bug
https://github.com/leo6104/ng-rehydrate-error-repro
Please provide the exception or error you saw
re.mjs:10057 ERROR TypeError: el.setAttribute is not a function
at EmulatedEncapsulationDomRenderer2.setAttribute (platform-browser.mjs:592:16)
at BaseAnimationRenderer.setAttribute (animations.mjs:270:23)
at setUpAttributes (core.mjs:1020:26)
at setupStaticAttributes (core.mjs:7535:9)
at ɵɵelementStart (core.mjs:15088:5)
at _a5_ng_container_0_Template (_a5.js:1:1)
at ReactiveLViewConsumer.runInContext (core.mjs:10311:13)
at executeTemplate (core.mjs:11069:18)
at renderView (core.mjs:10889:13)
at TemplateRef2.createEmbeddedViewImpl (core.mjs:22766:9)
h
another error case (same but little more detail callstack)
handled Promise rejection: el.setAttribute is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: el.setAttribute is not a function
at NoneEncapsulationDomRenderer.setAttribute (platform-browser.mjs:592:16)
at BaseAnimationRenderer.setAttribute (animations.mjs:270:23)
at setUpAttributes (core.mjs:1020:26)
at setupStaticAttributes (core.mjs:7535:9)
at ɵɵelementStart (core.mjs:15088:5)
at _a5_ng_container_0_Template (template.html:6:5)
at ReactiveLViewConsumer.runInContext (core.mjs:10311:13)
at executeTemplate (core.mjs:11069:18)
at renderView (core.mjs:10889:13)
at TemplateRef2.createEmbeddedViewImpl (core.mjs:22766:9)
TypeError: el.setAttribute is not a function
at NoneEncapsulationDomRenderer.setAttribute (https://.../chunk-SET2APWZ.js:16109:14)
at BaseAnimationRenderer.setAttribute (https://.../chunk-XDNB56EC.js:4246:23)
at setUpAttributes (https://.../chunk-YTYK4I53.js:4664:18)
at setupStaticAttributes (https://.../chunk-YTYK4I53.js:7713:5)
at ɵɵelementStart (https://.../chunk-YTYK4I53.js:11031:3)
at _a5_ng_container_0_Template (ng:///_a5.js:10:5)
at ReactiveLViewConsumer.runInContext (https://.../chunk-YTYK4I53.js:17559:11)
at executeTemplate (https://.../chunk-YTYK4I53.js:9029:14)
at renderView (https://.../chunk-YTYK4I53.js:8884:7)
at TemplateRef2.createEmbeddedViewImpl (https://.../chunk-YTYK4I53.js:18567:9)
a
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 16.0.0-rc.0
Node: 16.19.0
Package Manager: npm 8.19.3
OS: darwin x64
Angular: 16.0.0-rc.1
... animations, common, compiler, compiler-cli, core, elements
... forms, localize, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.0-rc.0
@angular-devkit/build-angular 16.0.0-rc.0
@angular-devkit/core 16.0.0-rc.0
@angular-devkit/schematics 16.0.0-rc.0
@angular/bazel 15.2.6
@angular/cdk 16.0.0-rc.0
@angular/cli 16.0.0-rc.0
@angular/material 16.0.0-rc.0
@angular/youtube-player 16.0.0-next.2
@nguniversal/builders 16.0.0-next.0
@nguniversal/common 16.0.0-next.0
@nguniversal/express-engine 16.0.0-next.0
@schematics/angular 16.0.0-rc.0
ng-packagr 16.0.0-rc.0
rxjs 7.8.0
typescript 5.0.3
Anything else?
the component html markup is here and got error in *ngIf="d.header" condition.
<ng-container *ngLet="{
fullWidth: fullWidth$ | async,
header: header$ | async
} as d">
<div class="board-section" [class.full-width]="d.fullWidth" cdkScrollable>
<global-navigation-bar *ngIf="d.header"></global-navigation-bar>
<div class="body-container" [class.show-header]="d.header">
<router-outlet></router-outlet>
</div>
<km-footer />
</div>
</ng-container>
<ng-template #fabWrapperContainer></ng-template>
root-cmp decorator
@Component({
selector: 'root-cmp',
templateUrl: './root-cmp.component.html',
styleUrls: [
'./root-cmp.component.scss'
],
host: {
toastContainer: 'true' // ToastContainerDirective,
},
})
and header$ variable use ngrx route data
header$ = this.store.select(selectRouteData).pipe(
map(({ header }) => !header || header !== 'hide'),
distinctUntilChanged(),
);
ngLet directive
interface LetContext<T> {
ngLet: T;
}
@Directive({
selector: '[ngLet]',
standalone: true,
})
export class LetDirective<T> {
private _context: LetContext<T> = { ngLet: null };
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef<LetContext<T>>) {
_viewContainer.createEmbeddedView(_templateRef, this._context);
}
@Input()
set ngLet(value: T) {
this._context.ngLet = value;
}
}