Когда мы импортируем сервис в lazy loaded модуль, то Angular создает новый экземпляр этого сервиса.
RouterModule объявляет и экспортирует директивы (router-outlet
, routerLink
, routerLinkActive
и т.д.) и сервисы (Router
, ActivatedRoute
и т.д.). Для того, чтобы избежать дублирования экземпляров сервиса у RouterModule
есть два метода: forRoot
and forChild
.
Из названий методов ясно, что метод forRoot
должен быть вызван только в корневом модуле (app.module), а forChild
должен вызываться в других (feature) модулях. Таким образом все директивы, компоненты и пайпы всё также будут экспортироваться из модуля, но новый экземпляр сервиса не будет создан.
Для ленивой загрузки модуля нужно использовать свойство loadChildren
объекта Route. loadChildren
определяет, какой модуль должен быть лениво загружен.
В примере ниже показано, что роутер лениво загрузит модуль, используя нативную браузерную систему импорта.
[
{
path: "lazy",
loadChildren: () =>
import("./lazy-route/lazy.module").then((mod) => mod.LazyModule),
},
];
В Angular конфигурация роутов в отдельном файле считается лучшей практикой. При этом роуты можно прописать в и в App модуле.
При ленивой загрузке модуле загружаются по требованию в тот момент, когда пользователь перешел по ссылке на этот модуль в роутере.
ActivatedRoute
— сервис, предоставляемый каждому компоненту маршрута, который содержит информацию о маршруте, такую как параметры маршрута, статические данные, глобальные параметры запроса и глобальный фрагмент.
RouterState
— текущее состояние маршрутизатора, включая дерево активных маршрутов вместе с удобными методами обхода дерева маршрутов.
Гарды позволяют ограничить навигацию по определенным маршрутам. Например если для доступа к определенному ресурсу требуется, наличие аутентификации или наличие каких-то других условий, в зависимости от которых мы можем предоставить пользователю доступ, а можем и не предоставить.
Router-outlet в Angular работает как плейсхолдер для динамической загрузки компонентов в соответствии с текущим роутом. При навигации контент компонента будет вставлен внутри <router-outlet></router-outlet>
.
CanActivate - разрешает/запрещает доступ к маршруту;
CanActivateChild - разрешает/запрещает доступ к дочернему маршруту;
CanDeactivate - разрешает/запрещает уход с текущего маршрута;
CanLoad - разрешает/запрещает загрузку модуля, загружаемого асинхронно.
Источники:
- https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304
- https://angular.io/tutorial/toh-pt5
- https://metanit.com/web/angular2/7.7.php
- Маршрутизация в Angular
- https://www.c-sharpcorner.com/blogs/routeroutlet-in-angular#:~:text=Router%2Doutlet%20in%20Angular%20works,outlet%20to%20load%20its%20content.
- https://angdev.ru/doc/angular-routing-guards/