Привет, ребята, В наших предыдущих блогах мы узнали почти все охранники маршрута angular, то есть CanActivate, CanDeactivate, CanActivateChild и Resolve. Кроме CanLoad.

CanLoad Guard используется для загрузки модулей, поэтому, прежде чем переходить к CanLoad route guard, давайте разберемся с ленивой загрузкой модулей.

Angular Lazy Loading Module — одна из самых важных тем в angular. Когда размер нашего приложения увеличивается, производительность нашего приложения и время загрузки уменьшаются. Используя угловую ленивую загрузку, мы также можем увеличить производительность приложения и скорость загрузки. Давайте посмотрим, как реализовать угловую ленивую загрузку.

Сначала я создал 3 компонента и 3 модуля, а именно:

  • home.component и home.module
  • контакты.компонент и контакты.модуль
  • about.component и about.module

Проверьте рабочий код на Stackblitz
https://stackblitz.com/edit/angular-module-loadlazy

Для домашнего модуля я не использовал модуль ленивой загрузки в роутере. Таким образом, angular загружает все, поскольку angular загружается с нетерпением.

Поскольку мы не реализовали ленивую загрузку, домашний модуль загружается с нетерпением. Это означает, что angular загружает все, что требуется. Таким образом, размер нашего пакета увеличивается.
В тех случаях, когда нам нужно загрузить конкретный модуль при достижении определенного маршрута. Давайте исследуем маршрут «/about», который мы загрузим, а «/contact» загрузит модуль контактов. Я создал модули в соответствии с компонентами.

В нашем about.module.ts

Мы объявляем все маршруты и компоненты при достижении после маршрута ‘’/about’’. При объявлении маршрутов мы будем регистрировать наши маршруты с помощью метода forChild в RouterModule.

Тот же шаблон применим и к модулю «Контакты».
В файле модуля маршрутизации мы импортируем наши модули, указав путь и взяв имя класса, объявив его в обратном вызове. Нравиться

 {path:'about', loadChildren: ()=> import('./about/about.module').then(x => x.AboutModule) },

А вот и магия ленивой загрузки.
В выводе при переходе к «/about/about-component» мы будем загружать модуль about.

— — — — — — — — — Конец лекции — — — — — — —

Проверьте все уроки Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b