Component-Less and Empty-Path Routes in Angular (2023)
Vložit
- čas přidán 27. 07. 2024
- 💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
In this video, you will learn what component-less and empty-path routes in #angular are. You will see some use cases when this pattern might be helpful and help you to make your code base more reliable and flexible. I hope you will learn something new today and if so, please share this video with your colleagues and friends.
🕒 Time Codes:
00:00:00 - Intro;
00:00:27 - Describing a use case;
00:03:52 - Component-Less & Empty-Path routes in Action;
00:11:56 - How to become a PRO in Angular Forms;
🙌 Support Dmytro bit.ly/donate-to-decoded-fron...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi - Věda a technologie
Please make Angular series please ,i want to learn angular.from.you.please
Excellent Angular content !
As usual, very useful content !
Thanks mate!
very very useful
Excellent many thanks 👌
thanks for the video, Great content ...!!
great video, your videos are better and better
Thank you 🙏🏻 glad to hear that
Note: If someone is updating their routes to component-less routes after watching this video, just make sure to check if there is any router.navigate() using relative paths inside those child components (e.g. router.navigate(['../parent', { relativeTo: currentRoute }])). That may need to be updated.
👍
very usefull tip
Wow that’s some useful stuff!
Awesome video.. 👌👌
Thank you!
Awesome as Always!
Very useful! Many thanks for sharing
Super useful! As usually. Thank you!
Thanks for another useful video, Dmytro
Excellent video as usual.
Every time something new, thanks!
Thanks for the video!
Super interesting as always, thanks!
Thanks a lot. As usual, it's a very useful video.
Nice feature! Thanks ❤
Great content as always.. keep it up.. 👍🤘
Awesome 🤩
Interesting video. I found myself using componentless routes for routed modals. That way angular doesn't complain about route not existing. What I haven't realized is that it worked only because I used it in lazy loaded modules. I'm currently searching for a better solution.
excited
Nice!
thats amazing mate, can you do some more around routing, especially resolving data when navigating to a route including refreshing the page
thanks, very interesting, never used this feature before. Before watching this video I supposed this was about routes that do not show anything (empty or dummy template) but just redirect user to another page. For example when user click some confirm link in email, the frontend just post data to the server and redirect to another (public) page instantly.
Really liked your videos man. Please make videos on angular application architecture
Дякую за цікаве та корисне відео 👍
Вперше прийшов до цього методу, коли потрібно було навісити резолвер на декілька роутів та не хотілось копіпастити
Якби на інтервью запитали щось про "Component-Less and Empty-Path Routes" навіть не здогадався би про що мова)
В мене часто було таке на співбесідах коли я забував яка «офіційна» назва тієї чи іншої фічі)) тож пояснював своїми своїми словами
Dima , your room now is not looking that empty )) good job ))
Ha ha :) My wife cares about that now :D
Incredible
Great video c:
I have a small tip: at 6:19, you can put your cursor on the `=>` and press `Ctrl + .` which allows you to quickly add `return` to the arrow function c:
Nice tip! Thanks, I didn’t know about it:)
Again, great content ! Could you make a video on Angular RouteReuseStrategy and its use cases ?
Great content, that technique could be useful in some scenarios. I really like the idea of providing in-depth angular form course. I hope oneday to see similar course about angular PWA, imo there is a lack of up-to-date materials to become comfortable with the topic.
Great!. Can you make a video about custom decorator?
very nice
Useful video as always!
Personally, I'm still waiting for the remake of your Angular Material theming course : )
I used it a few days ago, but tbh I wasn't sure if it will work as I thought ;)
Btw `discount` keyword works ;) haha
You are the best Dmytro😍
Thanks :) glad to hear that
Thank you very much for your work, very interesting and informative material.
can you make a series of videos about the ubiquitous language and domain oriented design (ddd) in Angular?
What is it, how is it customary to implement it in Angular, what difficulties can there be, what will it give in the end ....
Once again, thank you very much for your work.
Hey, thanks for the video!
I don't use Angular, but it would be interesting to try.
In real life apps, developers create Route objects as literals in the routing files?
What about type safety and possible typos in the routerLink path directive?
please make more frequent videos and complete playlista nd courses
Thank You! But why are you use inject function instead of common guard class? Is it better? Have you any video about inject function usage? Thank you!
It is a new feature the Angular Team recently introduced, I think it works the same, but it is treeshakable
Nice it is handy approach for reusabliliy, Dymtro can you create a video on Dom Sanitization please and how attacker add malicious code in angular.
I like the idea, thank you :)
@@DecodedFrontend thanks
Thanks for the video, very interesting concept.
But Does it work with lazy loaded routes?
Yes, it is :)
Nice, I think I tried in older angular version (11 or 8), this is something for 14 or 15 version?
Great. I have a questions.
What if user data is changed? Routes won't know that until we reload them?
Hi:) yes, you would need to re-activate the route to fetch the new data or use some other techniques to implement polling/reloading logic
@@DecodedFrontend thanks;)
What about canLoad guards, when I need lazy load specific array of routes?
It works with any guard) p.s keep in mind that canLoad guard is deprecated in favor of canMatch
Very nice!
I learned resolvers once, then I heard its bad because it is synchronous and its better to load data in component. Could You clarify this? Seems like good feature... Anyway great explanation as always. Its awesome you describe use case before exmplaining solution
Resolvers are great, especially when you implement loading state handling. With a little bit of work you can easily create nice user experience around that. You can use resolvers for essential data required for component withoit which it will not work properly. This way you don't have to repeat loading stste logic in all components.
Great video!!
I guess if the user had a global logout button and press it in one of those child routes, since the canActivate guard it's not triggered, could be a problem, isn't it?
In such a case, what would happen with the user resolver? Would it return the empty user or would it not be reactivated?
No, it should not be a problem. If you log out you usually don’t need to trigger canActivate guard. You just remove authentication token, etc and redirect to “login” page
@@DecodedFrontend In some cases removing the authentication token can't work properly. For example you have a form and want to ask the user if he sure to logout without saved shanges. It makes sense to logout via /logout route and use the canDeactivate guard.
nice strategy, but how could you redirect to another route if for example user is not authenticated?
You can inject Router in the Guard and navigate to a new url from within the guard. In this case with the isAuthenticated$ observable you can pipe it through a tap function that navigates to /login if the value is false
Thank you, @Netrole for assistant :)
Hi
Hi 👋🏻
will this also work if I have lazyily loaded children?
Yep, should work as well.
"it's easy to forget to install the guard when there are many routes"? Seriously?
This structure looks difficult even for the eyes. Yes, the code will be reduced but what is the profit? When you have at least 10 routes(and using more than one guard for all) with such a structure, you will be amazed by the complexity structure.
But yeah, cool approach if you're alone on the project.
Imagine you have a schematic which add some page with nested components to your project. Also this schematic add a new route with this page.
In this situation current approach is very useful, such as you don't want have a guard logic into schematic and just describe it into your routing module.
Hi,
Thanks for the feedback. You can always extract the component-less route config in the separate file, give a meaningful name to that constant and just import it to the main router config, so the main config will remain lean and readable.
insighful