🟢 Ленивая загрузка компонента

Информация

В Angular уже давно существует механизм для ленивой загрузки модулей на основе маршрутов, но ленивая загрузка отдельных компонентов была намного сложнее. Это испытание посвящено изучению того, как лениво загружать компоненты при помощи новой фичи, которая появилась в Angular 17.

Пояснение

Это простое приложение отображает TopComponent, который, по нашим предположениям, замедлил бы работу приложения, если бы был частью начального пакета (хотя на самом деле он содержит лишь немного текста, но мы притворяемся, что он замедляет приложение).

В текущем решении PlaceholderComponent отображается до тех пор, пока пользователь не нажмет кнопку для показа TopComponent. Однако, несмотря на то что TopComponent не виден до нажатия на кнопку, он все равно загружается вместе с начальным пакетом.

Используйте новую фичу Angular 17 для ленивой загрузки TopComponent, чтобы он загружался и отображался только после нажатия пользователем кнопки.

Когда вы закончите, вы увидите, что браузер загружает TopComponent в отдельном пакете после нажатия на кнопку для его отображения. В Chrome вы можете увидеть это, открыв DevTools, перейдя на вкладку “Network”, и нажав кнопку для отображения TopComponent.

Подсказки

Подсказка 1

Вы должны иметь возможность удалить сигнал topLoaded, когда закончите.

Подсказка 2

Новая фича Angular скроет TopComponent из вида, но он все равно будет загружаться в начальном пакете, если вы не измените способ определения AppComponent, и TopComponent в их декораторах. Эта задача начинается со старой архитектуры на основе NgModule, но вам нужно будет изменить ее, чтобы использовать новую фичу.

Подсказка 3

Новая фича - это Отложенные представления (Deferrable Views). Фича предлагает несколько триггеров. Один из них идеально подходит для этой задачи.