Component Store losing typing after adding the second property to the vm$.

[beeman]

Minimal reproduction of the bug/regression with instructions:

In order to show this bug I need 2 apps, one with version 10 and one with version 11.

Additionally, to make the explanation a bit easier I created a 2-minute video that shows the issue.

In essence:

• Add @ngrx/component-store v11 to an app
• Add a simple store exposing 1 property in the vm, make sure it auto-completes in the template
• Adding a second property breaks the auto-completion in the template

Doing the same with Component Store v10 works as expected.

I can imagine it has something to do with #2841 as that changed what gets returned by the selects.

Expected behavior:

The typing should behave the same after adding more properties.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

Latest Angular versions.

@ngrx/component-store v10: works as expected.
@ngrx/component-store v11: does not work as expected.

Other information:

I thought I went crazy, but luckily @nartc confirmed that he sees the same behavior.

I would be willing to submit a PR to fix this issue

[X] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No

[alex-okrushko]

Thanks @beeman. I think this is the first bug report with a great explanation in a video format 🙂 👍

I didn't investigate yet, but it's quite puzzling that it's fully typed at readonly vm$ and then it's Observable<unknown> in the template.

Doesn't make much sense to me. It almost feels like the Angular Language Service issue.

[beeman]

Thanks for your fast response @alex-okrushko!

I just ran the same experiment with an Angular v10 app (10.2.4) to test that behavior, but it seems to behave the same there.

For reference, Ng10 + Component Store v10 and Ng10 + Component Store v11.

[beeman]

Another thing that's probably good to note, if I manually type the vm$, it does work as expected in the template. For now this is my workaround.

  readonly vm$: Observable<{ loading?: boolean, items?: Item[] }> = this.select(
    // Component Store v11
    this.items$,
    this.loading$,
    (items, loading) => {
      return {
        items,
        loading,
      }
    },
  )

[timdeschryver]

I also tried this locally, and it seems like to be working here. (It took a while for the Angular Service Language to be ready though)

This is on VSCode, with the experimental feature activated

That being said, I do see some differences with inline templates vs html templates 🤯

[timdeschryver]

Is this still the case @beeman ?