Привет, ребята, В наших предыдущих блогах мы узнали почти все охранники маршрута 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