Description
Which @ngrx/* package(s) are the source of the bug?
component-store
Minimal reproduction of the bug/regression with instructions
Checkout https://github.com/berse2212/component-store-vs-component-factory-resolver
and run ng test
Expected behavior
Every test in this project should be working. I simply dynamically create a component and add it to the dom, then check if it's present
However dynamic component creation via ComponentFactoryResolver breaks as soon as I add a ComponentStore into my Constructor-Injections. (If you remove line 25 ( private coolStore: CoolStore, ) in app.component.ts the tests turn green). Interestingly the components html itself gets rendered, just the content that I add in the ts file is missing. That means that this this html:
<p>{{text}}</p>
gets rendered as <p _ngcontent-a-c2339630535=""></p> and not as
dummy works!
when text is declared like this in the component:text = "dummy works!";
Now you could argue that the ComponentFactoryResolver is bad anyways since it has been deprecated for a long time. And that using the intended replacement ViewContainerRef just works fine. And I would agree.
However since the ComponentPortal internally also uses the ComponentFactoryResolver (my assumption since you can override it with an additional parameter) it also breaks in tests.
Delaying your test execution (via hacky works) to continue at the end of the task queue somehow fixes this problem. E.g. by adding this line:
await new Promise(resolve => setTimeout(resolve, 0))
the same test now magically works.
Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)
ngrx: 16.3.0
angular: 16.2.0
node: v18.18.2
browser: Chrome 119.0.6045.124
operating system: Windows 10
Other information
No response
I would be willing to submit a PR to fix this issue
- Yes
- No