Более простой способ отложенной загрузки немаршрутизируемых модулей angular!
ПРИМЕЧАНИЕ. Я архитектор программного обеспечения, увлеченный Angular, React и AWS. В настоящее время я работаю над проектом React и AWS, но в Angular Community я чувствую себя как дома ❤ и поэтому я написал книгу «Angular Projects»
Одна вещь, которая всегда доставляла мне неудобство, когда я работал над Angular Projects (до v6) после того, как я некоторое время работал над React, заключалась в том, что я мог только лениво загружать маршрутизируемые модули Angular. В React вы можете отложить загрузку любого компонента с помощью react-loadable или даже React.lazy.
Я был в восторге, когда прочитал на прошлой неделе статью Netanel Basal о отложенной загрузке немаршрутизируемых модулей Angular (хотя эта функция была доступна в Angular v6). Но я чувствовал, что в нем много шагов для реализации отложенной загрузки, поэтому я решил создать библиотеку ngx-loadable, которая может лениво загружать немаршрутизируемые модули Angular, управлять различными этапами загрузки, а также позволяет вам предварительно загрузите модули при необходимости с помощью более простого API.
ngx-loadable
Проблема:
Angular предоставляет простой способ добавления модулей отложенной загрузки на основе маршрута. Но в большинстве проектов каждый маршрут, как правило, состоит из множества различных компонентов. Это может быть из-за множества модальных окон, вкладок и компонентов, которые появляются на основе взаимодействия с пользователем на одном маршруте.
Один из способов решить эту проблему - отложить загрузку javascript для тех компонентов, которые появляются при взаимодействии с пользователем на странице.
Это может помочь маршрутам загружаться быстрее. Предположим, на вашей странице много контента, и вы хотите загружать компоненты или библиотеки только тогда, когда контент появляется (при прокрутке пользователя). Зачем нам загружать весь контент одновременно с содержимым вверху?
Angular предоставляет решение для этого, но это не так просто, как модули Angular, основанные на ленивой загрузке. Текущее решение для отложенной загрузки немаршрутизируемых модулей Angular включает множество шагов, которые необходимо выполнить, как описано в указанной выше статье.
Решение:
ngx-loadable обертывает сложную реализацию для отложенной загрузки немаршрутизируемых модулей в простой API. Он предоставляет компонент ngx-loadable и службу LoadableService для отложенной загрузки модулей. Компонент может использоваться для управления загрузкой одного модуля и для отображения различных состояний, например, загрузка, ошибка, timedOut и загружено.
Шаг 1. Сначала установите ngx-loadable с помощью npm / yarn, а затем включите LoadableModule в свой AppModule.
Шаг 2: Добавьте модуль с загруженным компонентом. Итак, давайте представим, что у нас есть модуль под названием login-modal. Вы могли бы создать его с помощью Angular CLI со следующими командами
> ng g m login-modal > ng g c login-modal -m login-modal
Примечание. Имя модуля и компонента должны совпадать и создаваться в каталоге по умолчанию. Если вы хотите изменить его, вам необходимо передать конфигурацию в LoadableModule, который мы рассмотрим позже в этой статье.
Не забудьте добавить компонент в бутстрап
Шаг 3:
Теперь просто добавьте путь LoginModalModule к angular.json в массив lazyModules. Это позволит Angular CLI знать, что он должен создать ленивый загружаемый скрипт для этого пути. Надеемся, что в будущем это будет автоматизировано с помощью флага с использованием Angular CLI.
Шаг 4. Используйте компонент ngx-loadable
<button (click)="show = true" (mouseenter)="loginModalModule.preload()">
Preload on mouseenter and show on click
</button>
<ngx-loadable
#loginModalModule
[module]="'login-modal'"
[show]="show"
[timeout]="1000"
>
<div loading>Loading...</div>
<div error>Error</div>
<div timedOut>
TimedOut!
<button (click)="loginModalModule.reload()">
Reload
</button>
</div>
</ngx-loadable>
В этом примере, когда указатель мыши находится на кнопке, модуль LoginModal предварительно загружается, а при нажатии кнопки, если модуль все еще загружается, слот загрузки используется для отображения сообщения о загрузке, а затем LoginModalComponent загружает в ngx-loadableelement.
ИЛИ используйте метод preload / preloadAll из LoadableService для загрузки модуля / модулей.
import { LoadableService } from 'ngx-loadable';
...
class YourComponent {
contructor(private loadableService: LoadableService) { }
load() {
this.loadableService.preload('lazy')
.then(() => console.log('loaded'))
.catch((error) => console.error(error));
}
}
}
ngx-loadable сразу работает с простыми приложениями Angular, в которых все модули находятся в папке src / app. Вы можете настроить ngx-loadable для использования пользовательских путей, передав конфигурацию в LoadableModule
@NgModule({
imports:[
BrowserModule,
LoadableModule.forRoot({
appDir: 'src/app/lazy-loaded-modules/',
fileMapping: {
widget: 'src/app/custom/widget.module#SomeModule'
}
})
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Советы:
Используйте ngx-perimeter для предварительной загрузки в зависимости от близости мыши к элементу или используйте ngxInViewport для загрузки и отображения контента, если контент находится в области просмотра.
Вывод:
Не беспокоясь о различных этапах реализации отложенной загрузки немаршрутизируемых модулей, ngx-loadable предоставляет простой компонент для управления отложенной загрузкой.
Сообщите нам о любых дополнительных функциях, которые вы хотите ngx-loadable предоставить, связанных с отложенной загрузкой в репозиторий github.
👋 Привет! Я Зама Хан Мохаммед. Я работаю в Текзенит архитектором программного обеспечения - Web Technolgies. Я активно участвую в работе над проектами с использованием технологий Angular, React и Serverless, а также написал книгу Проекты Angular.
