CanLoad Guard in Angular Router & Preloading Strategies (2021)

[@DecodedFrontend]

Do not forget to leave your honest feedback! I hope you will find something useful in this video :) Enjoy!

[@aleksandrm3466]

This is the Best Angular channel. Thanks alot for your work, I am already waiting for the new video :)

[@DecodedFrontend]

Thanks a lot for the feedback! I appreciate it!

[@gururajmoger8649]

Pls explain more stuff in angular

[@DecodedFrontend]

I will :)

[@pavelbolshakov9799]

The most useful and understandable KZbin channel about Angular. Dmytro handsome💪

[@rs4267]

Greatest angular channel ! I didn't get the use of fn method in preload

[@pastagaz4241]

Awesome to see you talking about preloadStrategies. I have created a custom one on our project, with a pretty good option: it preload module only when user ‘mouseOver’ a menu link, with an array that save all preloaded modules to prevent trying to reload again.

[@DecodedFrontend]

Great idea! :) and there is also a library by Minko Gechev github.com/mgechev/ngx-hover-preload You might find it interesting

[@andresmauriciofajardoolaya2721]

I was waiting for this video, thanks :)

[@DecodedFrontend]

Enjoy! :)

[@manojojha68]

Can you please make video on Component life cycle hooks and ChangeDetectionStrategy?

[@bromptonhorsing8597]

Great video, as always It'd be really cool to see a video about import management (avoiding circular dependencies, yet having your imports not being ugly :) )

[@DecodedFrontend]

Nice idea! Thank you

[@yt.mhasan]

@@DecodedFrontend Any video on that yet?

[@DecodedFrontend]

@@yt.mhasan Not yet, sorry :(

[@abdouafailal4869]

Amazing work

[@shibinjohn2792]

Very helpful content. ❤ Much love brother🧡

[@sahilvig8014]

Can you please create some videos on angular testing.

[@booaboo2240]

this is what i looking for, buds! i have just started to learn about angular and so far i need a story to make my angular journey more understandable (since i am not a native EN also it is quiet hard to understand strange words in readable tutorial at angular.io). i always waiting for your vids :)! ps: i just a little bit having rough time to understand about http interceptors and it's usecase. mind you create that content here? or if you did, mind you to provide your video link so i can watch it? thanks in advance

[@DecodedFrontend]

I didn't do it yet, but I will :) Thank you for the feedback and suggestion!

[@playful_creations]

This is best channel. Can you please make video on component lifecycle hooks?

[@only_one_chance]

​Hey dude, Love your channel. Thanks for such great content. How about creating some portion on videos about ng-template, using templateRef, directives and components using ng-template etc. I think many people do a lot of mistakes using this techniques especially when creating embedded view through the controller. Thanks

[@pawansahu8605]

nice explanation 👍, please create one video for how to implement openId, authentication and authorisation related topics 😊

[@DecodedFrontend]

One day I will :)

[@Maryna768]

thanks for the great content!

[@kavyashreebj5848]

Hey Dmytro, thanks for all the awesome concepts! Could you please make one on the difference between changeDetectionStrategy.OnPush v/s ChangeDetectorRef.detach() ?

[@DecodedFrontend]

Yes, it will be sooner or later :) thank you for suggestion

[@dragorwyin9809]

00:07:52 Hey Dmytro! Awesome content as always. My little suggestion - You have a typo in "Subscribe to the *chanel* ". Should be *channel* instead :).

[@rihardkrauz4696]

So and what is the difference between purposes of canLoad guard and AuthPreloadingStrategy? Because both of them are doing the one thing - should we load lazy module or not. Maybe do you know any real-life examples of usages?

[@DecodedFrontend]

Hi Rihard, I see your confusion. Well, those 2 are solving different issues. The Guard "CanLoad" is being involved for only one concrete route ("/admin") and it is being resolved only at that time when user navigates to that route. The Preloading Strategies happens immediately when Angular App bootstraps and it is being applied for all Lazy Modules in the App. Also, if you do not allow to preload modules it doesn't mean that it can't be loaded at all, only CanLoad takes this decision if it is allowed/prohibited to load some certain module. You may reasonably ask "Why do we need preloading at all?" and we need it because loading of heavy modules may take some time and it might be visible to the user as some glitch or freezing, so preloading allow you to preload the module in background before user navigate to the lazy module. If we use an example from video there will be next scenarios: CanLoad: User navigates to a route => CanLoad guard is involved => if user logged in (true) => load the module for this particular route. AuthPreloadingStrategy: User enters the App => AuthPreloadingStrategy is involved => if user logged in (true) load all lazy loaded modules in the app. In this particular case we consider that any loggedIn user is an admin, so it make sense to preload AdminModule only if user authenticated because if it is a regular user it makes no sense to preload AdminModule and waste user's internet traffic because user will never reach the admin section. I hope I made it somehow clearer :)

[@Sevkingblade]

So it's like CanMatch for lazy-loaded routes. Might be an over simplification the way I said it but kinda like that

[@pawansahu8605]

super like 🙏

[@DjokovicAirlines]

Hi, thanks for the video. It's really helpful. But I have a question: For example, you are at 'home' route and there you have a button 'personal profile' which leads to either 'auth/login' or 'personal/profile' (depending on your login status). Each route (auth/... && personal/...) has separated module file (auth.module and personal.module) with lazy loading. If I'm not logged in and I press 'personal profile' button - it relocates me to 'auth/login'. So is it loads auth module or both auth and personal modules?

[@MK-we4dl]

Сенсей, помогите пожалуйста! При релоаде гвард отробатывает ДО загрузки проверочных данных в сервисе. По дереву загрузка даже не доходит до защищенного роута и переходит в корень "/". Первый грузится главный компонент и загружает данные, после чаилды с проверкой гварда по признаку из данных которые загрузил родительский компонент. При навигации всё отлично, но если сделать релоад то ничего не отрабатывает. Мотули лейзи, прелоад PreloadAllModules, гвард в провайдерах модуля с сервисами и компонентами версия 13.

[@yevhen3934]

Hello Dmytro! It's a great and helpful video! We are very grateful for your activity and work. You help us a lot to understand difficult topics. Good luck to you! It would be cool if you tell us about Smart and Dumb components. For example, a situation where we have many nested child components and if we want to transfer data from the deep child component to the parent, an "event emmiting hell" is formed . Someone suggest using a service with Subjects so that the parent subscribes to the stream and listens to these events of the deep child component. If we have a large project, then many services and subjects need to be created for this. I don't know if this solution is the best for such a case. What do you think about this? Also, I have one question and it would be great pleasure to hear your opinion. Let's consider the following situation. We have a large Angular project. We have components that include styles in the @Component decorator. If we build the project, then our bundles will include these styles. Our styles will be in *.js files. As a result, we will have a project size of ~2 megabytes, as an example. But, if we move our styles from components to global styles, using global classes in the components, and removing this binding in the @Component decorator, then after the project is built, they will be in *.css files. And the project will become ~1.7 megabytes in size, also as an example. We can call this project optimization. But we have a stupid project architecture. Now our styles aren't attached to the components. But is this optimization worth it? We do not adhere to the principles of Angular itself, as it seems to me. Some kind of confusion is going on. It was provided that in Angular a component is a template, styles and *.ts file. Why am I asking for your opinion here? We have a project, and the senior dev has implemented it in the second described way, i.e. he brought all the styles from the components to the global styles and put them all in the assets folder. As a result, they will be imported into the style.css file, and they won't be in the javascript files after the build. For some reason it is disgusting to me 😁 But still we do not break the rules - styles in styles, javascript code in js files. How do you find the perfect solution? Have we to write our own Webpack config for Angular?

[@DecodedFrontend]

Hi Yevhen, Thanks for your feedback! Regarding you question about smart/dump components. This pattern doesn't claim that Dump component must contain ONLY dump components, so in your case maybe it would make sense to introduce a new "container" somewhere in the middle and then you would not need to propagate event through entire component tree? Regarding styles. When you move styles from Component to global styles.css you break style encapsulation which I find not really good especially for big projects. I have heard that indeed encapsulation.none may decrease a final bundle but I doubt that this win worth it because your style become fragile and easy to break which is more visible for the user comparing to increased load speed up to 100-200ms :) Also keeping styles out of component folder leads to a situation when you just forget to clean up styles when you remove some component and you end up with a lot of dead-code, so I would recommend at least to keep styles file in the same folder with a component, but tbh I would disagree completely with the 2nd solution you described. I would agree if to the global styles could be extracted "theming styles" which are responsible for colors, typography, density etc. and it is basically how Angular Material forces you to do. P.s However, there is no perfect solution here and you should take a decision in your team on your own and to not rely on my thoughts too much because ultimately nobody knows the project better than you.

[@yevhen3934]

@@DecodedFrontend Damn, your words are brilliant! I'm happy that you answered my comment :) You're right about the Smart/Dumb components. Thanks for the advice on how to solve the given problem, it will help me a lot in the future! Your arguments are strong and have helped me build a strong position. It was difficult for me to form a thought that could be a weighty argument in that case. Now this gave me an idea of how to do it right. I completely agree with you and I am very grateful to you for your time! Have a nice day!

[@ВаноВано-л6р]

Красавелла!!!

[@DecodedFrontend]

Хаха)) спасибо 😉