ComponentStore breaks Tests with ComponentFactoryResolver

[berse2212]

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