Store: 🐞[BUG]: Store.select() returns an invalid selector if called before the State has been registered with NGXS

[Benno007]

Affected Package

@ngxs/store

Is this a regression?

Yes. This worked in 3.5.1.

Description

See https://github.com/ngxs/store/issues/1392#issuecomment-579524668 for original comment

🔬 Minimal Reproduction

Stackblitz: https://stackblitz.com/edit/angular-firu8r

I have output some info in the template, sorry if its not super clear, in a rush at work at the moment!

Basically, 'test' should appear and should be green. in the 'success' scenario, it is green, in the failure (for this regression, which works in 3.5.1), it is undefined/fails because of the state being undefined in the selector.

🔥 Exception or Error

ERROR TypeError: Cannot read property 'user' of undefined

Environment

Libs:
- @angular/core version: 8.2.14
- @ngxs/store version: 3.6.1

Browser:

Type error, so presumably all browsers.

- [ X] Chrome (desktop) version 79
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version 72
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 10.16.3
- Platform: Mac OS Catalina

Others:
We worked around it by moving our selector into the method, but it may affect other users. We also have many more selectors defined as class properties in components that this DOESN'T seem to be affecting at this point (well, we have no type errors elsewhere that we've seen...)

[splincode]

@markwhitfeld so, what do you think?

[markwhitfeld]

Thank you for this repro! I was able to figure out the issue. Basically, what has happened is that the selector was requested by the service field from the store before the State had been added to the store.
This happened because the state injects the service into its' constructor, therefore forcing this order of definition. I will have to do a PR to fix. There is no way that I would have gotten to the bottom of this without your repro, and I think that I may have observed this behavior in a slightly different way before without being able to figure out what was happening.
So, thank you very much!!!

[yd021976]

Hi, I meet same "regression".

if it helps, i've 2 precisions to bring

1 - The described behavior in this issue seems to appear ONLY with services provided in the main module. I have services with @Select properties declared in feature module services, and it works as expected (i.e. No error like "You've forgotten to import NGXS module")

2 - I found this issue is not repro when moving import of angular "BrowserModule" after importing NgxsModule.forRoot(). Don't know why, but it works as NGXS 3.5.1
But this way, it breaks plugin ngxs-reset-plugin as I logged issue #https://github.com/ng-turkey/ngxs-reset-plugin/issues/30

So at this time, I can't figure how to find a workaround in my specific context because i need in my main app service to rely on state & selectors at app startup (using APP_INITIALIZER).

So do you have any workaround to propose before this bug is solved ? And do you created so PR to solve it ?

Thank you

[bschantz]

I believe I'm also experiencing this. I'm able to work around it by changing the order my state classes are specified in NgxsModule.forRoot, with the classes at the end of the array being loaded first.

I hadn't found this issue while I was tracking it down, and finally figured it out by setting a logpoint at getStateGetter(key) where key was the name of my failing state class. Looking at the (incomplete) list of paths in stateFactory.statePaths clued me that I should take a look at the order of things.

[markwhitfeld]

Fix on its way soon!

[markwhitfeld]

This is fixed in v3.7.1.
Please let me know if there is still an issue.