-
Notifications
You must be signed in to change notification settings - Fork 399
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🐞[BUG]: 'Error: You have forgotten to import the NGXS module' after upgrading to 3.7.4 #1854
Comments
Same problem here but also while serving angular. |
The same happened to me with 3.7.4 with Angular 14.0.2 |
I got an close issue, but instead of forgotten to import NGXS module, I'm getting Injector has already been destroyed |
@willocho are you able to install the "@ngxs/store": "3.7.4-dev.master-310a613",
"@ngxs/storage-plugin": "3.7.4-dev.master-310a613",
... |
@arturovt problem persists with the 3.7.4-dev.master-310a613 versions. |
I'm seeing the same You have forgotten to import the NGXS module' issue when running the application after upgrade. Oddly this works the first time when going to route that is subscribing to a slice of state via @select decorator, subsequent visits to same route fail. I have tried the updated 3.7.4-dev.master-310a613 package and makes no difference. Removing the the @select decorator and using the store directly fixes the issue, eg: //@Select(UserState) userState$: Observable<UserStateModel>;
userState$ = this.store.select<UserStateModel>(UserState); For further context this is in service scoped to a component. Eg (much simplified for brevity): @Injectable() // NOTE: scope this to the page.
export class KanbanDataService implements OnDestroy {
@Select(UserState) userState$: Observable<UserStateModel>;
constructor(private store: Store){
const sub = this.userSate$.subscribe(); // much simplified for brevity
this.subscriptions.push(sub);
}
ngOnDestroy() {
this.subscriptions.forEach(s => s.unsubscribe());
}
} |
Exactly the same scenario happens to me as for @jaibeales |
I don't know if it can help, but I encountered the same error in 3.7.3 and Angular 13. The reason it failed is subscribing the selector resulting observable in the component constructor, instead of ngOnInit, in fact, not respecting the Angular component lifecycle.
|
After a lengthy discussion, we decided to deprecate the Select decorator since it has impossible bugs to fix (just because Angular itself doesn't allow it). We're also planning to drop it in the future. It's complicated to maintain since we have to invest a lot of time into a single Select decorator rather than focusing on other essential issues. It's not type-safe. It has problems in server-side rendering and module federation. We tried to fix the server-side rendering issue initially, leading to a dead end. For now, start replacing the Select decorator with |
First of all great thanks to @lehmstedt for describing what was the cause for me getting the error in about 5 - 6 of of 52 components using it in my app. I had just upgraded to angular 13 and was pretty distraught that everything was breaking left and right. Such a relief to be able to fix them all easily. I don't look forward to replacing all those @Selects in the future, and I will miss using it. But I guess if it must be, it must be. When making this change, though, please give lots of examples of how to map different uses of @select to store.select. I found that the example above: |
@ckapilla the SSR apps might be rendered concurrently when multiple HTTP requests are done and the second application being rendered overwrites the static |
@ckapilla I did the same same thing at first based off of the docs but here is an example showing what @arturovt last comment explains. Avoid Convert: To: Then you can subscribe or async pipe etc. |
There goes my weekend 🤣 |
@digitalcraftco thanks so much for those details, looking forward to giving it a try. |
Is there some confusion re Avoid |
@jaibeales I think that makes the most sense. The confusion is arising from us who don't fully understand whats happening behind the scenes of the
|
Small tip for changing the @select In Vscode, you can regex |
We got this error in one component after upgrading but found it was due to a service that was being provided locally to a component in the providers array when it didn't need to be. Changing it to be global via the |
Our recommendation to move away from the decorator still stands but we decided to only introduce the deprecation message in v3.8 because we will be providing a cleaner alternative to the decorator that does not require injecting the store. |
great news -- much appreciate your coming up with a cleaner solution |
Just for a bit of a preview of what we are looking at, here is a prototype I made last year: It is in Angular 11, so there may be a small tweak around the |
Nice @markwhitfeld! Lovely simple functions ♥. I hadn't heard of ɵɵdirectiveInject(), using this from a function to get dependencies rather than injecting via constructor is very powerful (although somewhat experimental?). |
Would it be worth updating the select docs with a note on the deprecation, with the alternative approach highlighted e.g for people who aren't aware and start on a new project for the first time |
@markwhitfeld utility functions seem to work great in Angular 15 with |
i see the first draft for the changes in version 3.8 so I think this is a work in progress and it soon will be resolved, thanks to the whole team that is putting a lot of effort on this. |
I'm trying to migrate to ngxs and my karma tests are experiencing this weird issue.
|
@HarelM could you create a new issue and include a full reproduction? |
I think it was an error on my end unfortunately. I managed to fix the issue by making sure the test is executing the setTimeout I had on my service. |
The @select decorator will be deprecated, but will be replaced with a
simpler alternative (see updated example
#1854 (comment)). We are
busy fleshing out the RFC for this API with respect to signals vs
observables.
You can dispatch in response to a select, and it will work as expected, but
I would recommend looking at your actions to see if there is something
there that you could respond to.
…On Sun, 07 May 2023, 20:42 Harel M, ***@***.***> wrote:
I think it was an error on my end unfortunately. I managed to fix the
issue by making sure the test is executing the setTimeout I had on my
service.
Thanks for the super quick response!
So this still leaves the question if @select <https://github.com/select>
will be deprecated in the future.
And another one, which is related to my issue, is if it's OK to dispatch
from a @select <https://github.com/select> subsription? In angular-redux
which I currently use it creates a problem of state change fires
incorrectly, so I needed to add a setTimeout. Is this needed here?
—
Reply to this email directly, view it on GitHub
<#1854 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAO3U2KC565GNSK66OEJLQTXE7UKHANCNFSM5YK4NAUQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
The main reason I'm asking is because I had a bug when using angular-redux with the same flow:
I do all the logic outside the state classes and leave them to be simple, without logic, just update state from the action data, so I'm not sure how to avoid this "loop". |
are the alternatives included in 3.8 now or should we be using the ngxs-util that was provided earlier in this thread? |
The |
Affected Package
The issue is caused by package @ngxs/3.7.4
Is this a regression?
Yes, the previous version in which this bug was not present was: 3.7.3Description
After upgrading to 3.7.4, released earlier today on npm, our angular tests started failing.🔬 Minimal Reproduction
The test would fail for a class that simply used the Select decorator, or depended on a class that used the Select decorator.
Minimally reproducible example:
Where ScreenLayoutService is a an Angular service that uses @select
https://stackblitz.com/...🔥 Exception or Error
Environment
Downgrading from 3.7.4 to 3.7.3 resolved the issue
The text was updated successfully, but these errors were encountered: