getLNodeForHydration return item which have boolean property

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

hi sir,
Hope you have a good day.

As this issue #51157, it seem work with normal angular application. I try to reproduce it but I get fail so this repo is fine: https://codesandbox.io/p/sandbox/relaxed-feather-27fv8y.

Video deleted

I can give the context, and you can skip my stupid English Voice explain :D

Step

I try to achieve dynamic html content render by ngx-dynamic-hook. It work, but as the last time, it still have flick. I try to revert everything, event use the deleted angular/core package but it still flick.
I decided to do native render instead of using library and get error.
try to debug it and get this value is true, while I think it should not be this boolean value.
the lView variable here looks like have an unexpected item which have boolean value.
the clue lead to this function, some how it not working.

Question

So the question is, at which condition something I code become boolean value? If I can answer that. maybe I can track the real html or ts code I wrote have transform to boolean and I can make a reproduce repository.

I think that all. After that I will try it again and see the reason why it still flicks on dynamic render.

Please provide a link to a minimal reproduction of the bug

I try to reproduce it but I get fail so this repo is fine: https://codesandbox.io/p/sandbox/relaxed-feather-27fv8y

Please provide the exception or error you saw

TypeError: Cannot create property 'ssrId' on boolean 'true'
    at getSsrId (./node_modules/@angular/core/fesm2022/core.mjs:30711:20)
    at serializeLContainer (./node_modules/@angular/core/fesm2022/core.mjs:30831:24)
    at serializeLView (./node_modules/@angular/core/fesm2022/core.mjs:30969:46)
    at annotateHostElementForHydration (./node_modules/@angular/core/fesm2022/core.mjs:31087:21)
    at annotateComponentLViewForHydration (./node_modules/@angular/core/fesm2022/core.mjs:30733:16)
    at annotateForHydration (./node_modules/@angular/core/fesm2022/core.mjs:30789:17)
    at <anonymous> (./node_modules/@angular/platform-server/fesm2022/platform-server.mjs:16568:30)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
    at _next (./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:22:1)
Angular is running in development mode.

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 16.1.8
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 16.2.0
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.8
@angular-devkit/build-angular   16.1.8
@angular-devkit/core            16.1.8
@angular-devkit/schematics      16.1.8
@angular/cli                    16.1.8
@nguniversal/builders           16.1.3
@nguniversal/express-engine     16.1.3
@schematics/angular             16.1.8
rxjs                            7.8.1
typescript                      4.9.5
webpack                         5.88.1
zone.js                         0.13.1

Anything else?

Thank you so much for you support

@hiepxanh

@hiepxanh thanks for reporting the issue and providing the details 👍

I was able to reproduce the problem and it happens in a scenario where both root component and child components inject ViewContainerRef. This causes an update in internal data structures which the current hydration logic doesn't account for. The situation is similar to #51157, just happens at a different location.

Here is a setup that causes the problem:

@Component({
  standalone: true,
  selector: 'dynamic',
  template: `<span>This is a content of a dynamic component.</span>`,
})
class DynamicComponent {
  vcr = inject(ViewContainerRef);
}

@Component({
  standalone: true,
  selector: 'app',
  template: `<main>Hi! This is the main content.</main>`,
})
class AppComponent {
  vcr = inject(ViewContainerRef);

  ngAfterViewInit() {
    const compRef = this.vcr.createComponent(DynamicComponent);
    compRef.changeDetectorRef.detectChanges();
  }
}

I've identified the root cause in the code as well and will work on a fix. Will keep this thread updated.

Thank you.

Thank you so much sir, that very nice. Glad that I can help

@hiepxanh

Hi @hiepxanh, just wanted to let you know that I've created a draft PR #51456 with a proposed fix for the issue that you reported in this ticket.

You can test (locally) if this fix resolves the problem that you've mentioned by using build artifacts from the PR. You can try updating your package.json file, change the @angular/core package reference and running npm install --force:

"dependencies": {
  ...
  "@angular/core": "https://output.circle-artifacts.com/output/job/5fed456a-bc17-4cb7-a271-b2ef64b5e013/artifacts/0/angular/core-pr51456-f9d02a7ced.tgz",
  ...
}

Note: this archive is available only temporarily, please do not use it in production builds.

Thank you.

Aw, thank you so much sir, look like we did it! We were going through the root of the issue and fixing it. The above is code rendered by ngx-dynamic-hooks and looks like it uses angular core 13 version which should not work. The below one using angular core and render directly.

Congratulations sir. Thank you so much.

@AndrewKushnir

hi @AndrewKushnir, thank you so much for your support. I already try with ngx-dynamic-hook and his response is, it still using latest angular core in the node_modules. And because he meantion that he use render but tthis one use renderer and look like it still cause the flick. So I decide to write my own work and wish your help.
I created new issue here
#51491

In simplified terms, the library does this for every dynamic component:

  const containerElement = this.renderer.createElement("app-dynamiccomponent");
  this.renderer.insertBefore(parentElement, containerElement, anchorElementWhereTheComponentShouldBe);
  const dynamicComponentFactory = this.cfr.resolveComponentFactory(DynamicComponentClass);
  const dynamicComponentRef = dynamicComponentFactory.create(injector, [], containerElement);
  this.appRef.attachView(dynamicComponentRef.hostView);
  dynamicComponentRef.changeDetectorRef.detectChanges();

more code example can be found here https://github.com/MTobisch/ngx-dynamic-hooks/blob/master/projects/ngx-dynamic-hooks/src/lib/components/outlet/services/componentCreator.ts#L325

fix(core): handle hydration of view containers that use component hos…

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

fix(core): handle hydration of view containers that use component hos…

Navigation Menu

Repository navigation

getLNodeForHydration return item which have boolean property #51318

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Video deleted

Step

Question

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run `ng version`)

Anything else?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

getLNodeForHydration return item which have boolean property #51318

Description

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Video deleted

Step

Question

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

Activity

AndrewKushnir commented on Aug 11, 2023

hiepxanh commented on Aug 11, 2023

AndrewKushnir commented on Aug 23, 2023

hiepxanh commented on Aug 23, 2023

hiepxanh commented on Aug 24, 2023

angular-automatic-lock-bot commented on Sep 29, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Please provide the environment you discovered this bug in (run `ng version`)