CanLoad Guard in Angular Router & Preloading Strategies (2021)

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

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

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

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

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

Can you please create some videos on angular testing.

Very helpful content. ❤
Much love brother🧡

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?

super like 🙏

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

thanks for the great content!

Amazing work <3 !!! keep up the good work, it will pay out soon

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?

​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

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?

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

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 :) )

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

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.

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

Pls explain more stuff in angular

I was waiting for this video, thanks :)