Angular 17: отложенная загрузка общего компонента
(Большинство ответов, которые я нашел, очень устарели и не касаются отдельных компонентов).
В моем приложении Angular есть несколько автономных общих компонентов. К сожалению, я не могу найти способ сделать их отложенную загрузку, если они не являются маршрутом, который использует loadComponent() и import() в файле определений маршрутов.
Итак, у меня есть это в моем приложении:
src
- main
- app
- modules
- shared
- components
- shared-component1.component.ts
- shared-component2.component.ts
Есть ли в современных версиях Angular относительно простой способ отложенной загрузки общего автономного компонента Angular?
Ответы 2
Вы можете добиться этого с помощью отложенных просмотров. Чтобы отложенно загрузить компонент, просто поместите его внутри блока @defer в шаблоне, как показано ниже:
@defer {
<shared-component1 />
}
Убедитесь, что компонент загружается только через @defer во всем проекте, а не загружается где-то еще. (Спасибо @Matthieu Riegler за указание на это)
Другой подход, который может сработать, — сделать компонент автономным или создать новый модуль, который его объявляет и экспортирует.
По умолчанию он будет удален из основного пакета (при условии, что он туда не импортирован) и включен во все ленивые модули, которые его импортируют.
Вы можете проверить это с помощью webpack-bundle-analyzer, чтобы убедиться, что ваш новый модуль компонента не включен в ваш основной пакет.
Этот подход всегда хорошо работал для моих общих компонентов.
Также убедитесь, что этот компонент не загружается где-либо еще!