Есть ли способ для ленивых компонентов загрузки, а не модулей, в Angular?

Ленивая загрузка - обычно используемая техника. Однако в Angular кажется, что уровень детализации этой техники останавливается на уровне модуля.

Это означает, что вы можете иметь основной модуль, который загружается в браузере, а затем по специальному случаю модули B и C и D могут загружаться лениво.

Это объясняет почти все учебные пособия в Интернете. Однако есть ли способ загрузки компонентов лениво?

Рассмотрим этот простой пример того, что пользователь входит в приложение, а при нажатии на ссылку "счета-фактуры" URL-адрес изменяется на новый маршрут /invoice/list а индикатор выполнения показывает загрузку, в то время как компонент invoices включая HTML и JS, загружается внутри браузера, динамически регистрируется с основным модулем и отображается в соответствующей розетке. Возможно ли это с помощью Angular?

Ответы

Ответ 1

Ленивая загрузка компонента невозможна. Причиной такого поведения является структура углового. Компоненты в угловой части должны быть частью модуля. Угловой модуль - это контейнер, в котором вы определяете все компоненты, сервисы, трубы и т.д. При построении dist dist приложения все зависимости, объявленные в модуле, включаются для создания фрагмента (transpiled js code). Все непосредственно импортированные модули вместе образуют основной фрагмент, тогда как модули, отмеченные как лениво загруженные, образуют отдельный блок, который находится на сервере до тех пор, пока не будет достигнут соответствующий маршрут, и вызов для него будет сделан от клиента. Теперь компоненты не образуют кусок, и, следовательно, это невозможно

Ответ 2

В настоящее время (Angular 8 timeframe) есть две сторонние библиотеки, которые облегчают отложенную загрузку компонентов:

Примечание: обе эти библиотеки построены на NgModuleFactoryLoader, который устарел в Angular 8, но альтернативы пока нет...

Команда Angular объявила, что ленивая загрузка компонентов должна быть проще с Ivy (Angular 9?), Но пока не ясно, как это будет выглядеть...