Please use the time codes in the video description, leave your feedback, and check out my Angular Courses - courses.decodedfrontend.io UPDATE: In the video, I forgot to mention that when the error happens in the resolver observable, the NavigationCancel event is fired instead of ResolveEnd which might cause the loading animation to be stuck. It could be solved by extending the filter operator in _hideLoaderEvents$ by filter((e) => e instanceof ResolveEnd || e instanceof NavigationCancel).
@@DecodedFrontend Yeah, that's true! Don't stop to upload such a great content. Even your sense of humor and faults are great :D Keeping those movies alive!
Really I got some more insight every time when I’m watching your videos, Can you make something for global errors handling in Angular. Last but not least Thank you so much ! for amazing and informative videos.
I get to learn new things with every video that you make. Great video as always. One suggestion - While uploading project on Github, can you create 2 branches, one with starter code and other with the Final solution?
Great content, loved the techniques you used, especially merging of the observable streams, super useful. What I would have liked to have seen is the error scenario handling, to see what happens
This is super as usual, thanks a lot. It would be cool to see some video from you regarding RxJS operators that you often use and best places to use. Thanks in advance:)
I feel like 13:26 could be done much easier, in one Observable instead of three. Something along the lines of: export class AppComponent implements OnInit { isLoading$!: Observable; constructor(private router: Router) {} ngOnInit(): void { this.isLoading$ = this.router.events.pipe( filter((e) => e instanceof ResolveStart || e instanceof ResolveEnd), map((e) => e instanceof ResolveStart) ); } } When the event is a start event, it'll get mapped to true; else to false. No need to merge Observables or even have them on a class-level as variables. Or am I missing something?
Thank you for it. But can u show us how to resolve the user data on page refresh once the user is on the user details page. In the example above the users url was harcoded on the user service. But how would u solve if the url was on the parent component? Thank you😊
Great video! What if we navigate to specific route second time, but don't want to see this 'progress-bar event' again. Can we cache our data with this Resolver and is it make sense?
Hi thanks for the tutorial, but can you make one where the resolver depends on another resolver? Eg in this very same scenario where the user deep link onto a single user. But the difference would be that instead of hard coding the Users link, this would be provided by another resolver So getUsers need a resolver to get the list of users and its link (profile) then getUser will need to get the link from the usersResolver to them append the id to it thanks
Hi, what if the case if I want refresh resolved data ? I mean, in „shared service” way I will create something like refreshData subject and switchMap with it. How can I achieve this kind of behaviour in resolver ? Should I refresh entire page to get routing kick in and refresh the data ?
I have that same extension that displays the import cost; however, whenever I import anything from `rxjs` (and not `rxjs/internal/Observable` or the like), mine reads out as "144.1k (gzipped: 28.6k)" while yours reads as "8.8k (gzipped: 2.8k)". Is there a certain setting I need to configure with the extension? Or is there something you have established with your app's configurations/settings? Like I alluded to previously with `rxjs/internal/Observable`, I saw this video on boosting an Angular app's performance (that was narrated and assumingly written by Jeff Delaney/Fireship), and he recommended to start importing from `rxjs/internal/Observable` directly. I also know there are the "static imports" that work like `import 'rxjs/Observable/add/map` or the like. I'm never sure which one I should use for which particular use case. Is there a diagram, a chart, or a question diagram/tree I can use for a reference? Apologies for the word vomit, but this has been an issue I've been trying to wrap my head around for a while and noticing the remarkably small import size you were getting for RxJS modules was incredibly perplexing for me. Any assistance is much appreciated!
It's admitted to inject some Store into the resolvers and dispatch action from them? Or the best practice is to inject the store only in parent component and dispatch all the actions needed to load it and all it's children?
I personally do not see any problems with that. Of course, it depends a lot on a concrete use-case but if you need, for instance, to dispatch some action or resolve data which depends on data from the Store and you need to do it right before the component for the route will be activated, then I do not see any other option as to inject the store in your resolver and use it there.
you are the good teacher, but sometimes we didn't understand because you start video and you are already create project and configure everything, that lost us...
Please use the time codes in the video description, leave your feedback, and check out my Angular Courses - courses.decodedfrontend.io
UPDATE: In the video, I forgot to mention that when the error happens in the resolver observable, the NavigationCancel event is fired instead of ResolveEnd which might cause the loading animation to be stuck. It could be solved by extending the filter operator in _hideLoaderEvents$ by filter((e) => e instanceof ResolveEnd || e instanceof NavigationCancel).
This channel is amazing , there is no word , every video you post about angular motivates me to learn
Happy to hear that! and your motivation motivates me to make more videos ;)
@@DecodedFrontend Yeah, that's true! Don't stop to upload such a great content. Even your sense of humor and faults are great :D Keeping those movies alive!
best angular tutorial i've seen so far, very practical, clear and useful.
you should make unit test deep dive that would be awesome
Really I got some more insight every time when I’m watching your videos, Can you make something for global errors handling in Angular. Last but not least Thank you so much ! for amazing and informative videos.
Really amazing video to understand all the angular concepts more clearly 👏
Glad to hear that! Thanks
The routing resolve events is really useful, didn't know we have that.
Awesome, just what I was looking for months, TYSM
I get to learn new things with every video that you make. Great video as always.
One suggestion - While uploading project on Github, can you create 2 branches, one with starter code and other with the Final solution?
that's really good idea I hope he sees it
I see it :) Thanks for suggestion, I will keep in mind it next time!
yeay, a course that i was looking for
Thanks Krisna!
Great content, loved the techniques you used, especially merging of the observable streams, super useful.
What I would have liked to have seen is the error scenario handling, to see what happens
Thanks for the hint :)
This is super as usual, thanks a lot. It would be cool to see some video from you regarding RxJS operators that you often use and best places to use. Thanks in advance:)
Guy, make all for being as a "Google Angular Developer Expert". Good luck!
Hi Dmitry! Believe or not, but this morning I officially became a Google Developer Expert in Angular 😄
Nice video! The content of this channel is amazing. This kind of content is hard to find.
An other banger thanks 🎉
Thank you so much ❤!
Thank you very much 😎😎😎
thanks again! I just copied your code into my project!😀
Excellent!! Nice explanation. Thanks
I am learning so much from you man :)
thank you for this amazing video !
I feel like 13:26 could be done much easier, in one Observable instead of three. Something along the lines of:
export class AppComponent implements OnInit {
isLoading$!: Observable;
constructor(private router: Router) {}
ngOnInit(): void {
this.isLoading$ = this.router.events.pipe(
filter((e) => e instanceof ResolveStart || e instanceof ResolveEnd),
map((e) => e instanceof ResolveStart)
);
}
}
When the event is a start event, it'll get mapped to true; else to false. No need to merge Observables or even have them on a class-level as variables. Or am I missing something?
excellent video, thanks for spend your time do it
Amazing bro, nice explanation. thanks a lot.
Thank you for this video, please let me know what extension your using to generate the resolver in vs code?
Hi! Thanks for a feedback. It called NX Console
@@DecodedFrontend thank you
it helped me! thanks bro
love your hair! content is great as well, thanks
Thank you for it.
But can u show us how to resolve the user data on page refresh once the user is on the user details page.
In the example above the users url was harcoded on the user service. But how would u solve if the url was on the parent component?
Thank you😊
Great video thank you. Can we use mutliple 's and can we display two angular applications in single page? pls tell me
Very informative 👍
Thanks a lot, bro 🤟
You are welcome 🙂
Great resource
Thank you! Glad you liked it :)
Great video! What if we navigate to specific route second time, but don't want to see this 'progress-bar event' again. Can we cache our data with this Resolver and is it make sense?
Hi thanks for the tutorial, but can you make one where the resolver depends on another resolver?
Eg in this very same scenario where the user deep link onto a single user.
But the difference would be that instead of hard coding the Users link, this would be provided by another resolver
So getUsers need a resolver to get the list of users and its link (profile) then getUser will need to get the link from the usersResolver to them append the id to it
thanks
Hi, what if the case if I want refresh resolved data ? I mean, in „shared service” way I will create something like refreshData subject and switchMap with it. How can I achieve this kind of behaviour in resolver ? Should I refresh entire page to get routing kick in and refresh the data ?
I have that same extension that displays the import cost; however, whenever I import anything from `rxjs` (and not `rxjs/internal/Observable` or the like), mine reads out as "144.1k (gzipped: 28.6k)" while yours reads as "8.8k (gzipped: 2.8k)".
Is there a certain setting I need to configure with the extension? Or is there something you have established with your app's configurations/settings?
Like I alluded to previously with `rxjs/internal/Observable`, I saw this video on boosting an Angular app's performance (that was narrated and assumingly written by Jeff Delaney/Fireship), and he recommended to start importing from `rxjs/internal/Observable` directly. I also know there are the "static imports" that work like `import 'rxjs/Observable/add/map` or the like. I'm never sure which one I should use for which particular use case. Is there a diagram, a chart, or a question diagram/tree I can use for a reference?
Apologies for the word vomit, but this has been an issue I've been trying to wrap my head around for a while and noticing the remarkably small import size you were getting for RxJS modules was incredibly perplexing for me.
Any assistance is much appreciated!
Thank you
It's admitted to inject some Store into the resolvers and dispatch action from them? Or the best practice is to inject the store only in parent component and dispatch all the actions needed to load it and all it's children?
I personally do not see any problems with that. Of course, it depends a lot on a concrete use-case but if you need, for instance, to dispatch some action or resolve data which depends on data from the Store and you need to do it right before the component for the route will be activated, then I do not see any other option as to inject the store in your resolver and use it there.
Nice video, however this does not work on Angular 12, please assist.
Thanks
Actually, I'm using a resolver with a guard
Hi Khumo,
Thanks for your feedback. Actually, it works with Angular 12.x, you probably should look for the issue on your end.
Its great video, thanks for it. Also can you please tell me the extension you are using to show the imported module size in kb ?.
Thanks in Advance.
Hi! It is this vs code extension marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
@@DecodedFrontend thanks bro
you are the good teacher, but sometimes we didn't understand because you start video and you are already create project and configure everything, that lost us...
will something like this resolve?
return {
listA: Observable,
listB: Observable
...
}
please what's the name of the extension you used to generate the resolver
NX console