Введение в ленивую загрузку Angular с маршрутизацией!

Angular предоставляет очень чистый и простой способ модулировать приложение с помощью NgModules. Но Angular также предоставляет простой способ разделить пакет приложений на части на основе группы функций или маршрутов и сократить время начальной загрузки. А остальные фрагменты загружаются только тогда, когда пользователи посещают этот конкретный маршрут. Звучит безподобно!

Итак, давайте попробуем реализовать очень простое приложение, которое реализует отложенную загрузку Angular-6.

Предварительные требования

Последняя версия npm (6.1.0 или выше)
Последняя версия angular cli (6.0.8 или выше)

Во-первых, давайте создадим новое приложение angular, используя следующую команду angular-cli

ng new lazy-loading --routing

Флаг «- routing» в приведенных выше командах дает команду angular-cli генерировать специальные ts-файлы для маршрутизации для нашего нового приложения.
После того, как все файлы сгенерированы и зависимости узлов установлены, cd в папку «lazy-loading» и запустите приложение в режиме разработки, используя следующую команду:

ng serve

После того, как приложение запустится без ошибок, перейдите по URL-адресу приложения в браузере, который обычно должен быть

Http: // localhost: 4200 /

Теперь давайте создадим два модуля Angular, которые представляют две функции приложения и будут содержать компоненты, специфичные для функций, и будут доступны по разным URL-адресам. Создайте новые модули и компоненты модулей, используя следующую команду:

ng generate module admin --routing
ng generate component admin/admin-dashboard
ng generate module staff --routing
ng generate component staff/staff-dashboard

Как и при создании приложения, флаг «- routing» в приведенных выше командах гарантирует, что файлы модуля маршрутизации будут созданы и для наших новых модулей. Он также заботится об интеграции admin.module и admin-routing.module, а также staff.module и staff-routing.module.

admin-routing.module и staff-routing.module будут отвечать за обработку всех маршрутов, специфичных для администратора и персонала, и должны иметь сопоставления для путей маршрутов к компонентам. .

Теперь приступим к определению наших маршрутов.
Добавьте следующие маршруты в admin.routing.module.ts.

import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
const routes: Routes = [
  {
    path: '',
    component: AdminDashboardComponent
  }
];

Добавьте следующие маршруты в staff.routing.module.ts

import { StaffDashboardComponent } from './staff-dashboard/staff-dashboard.component';
const routes: Routes = [
  {
    path: '',
    component: StaffDashboardComponent
  }
];

В приведенных выше примерах кода мы связали корневой путь конкретного модуля с компонентами панели управления.

И, наконец, мы соединяем наш app-routing.module с этими двумя модулями, используя следующую конфигурацию маршрутов, добавленную в app-routing.module. Обратите внимание, что в следующей конфигурации маршрутов мы не привязываем путь к компоненту, вместо этого мы используем тег loadChildren, в котором указан путь к файлу модуля, за которым следует «#» (хэштег) и имя класса NgModule.

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    path: 'staff',
    loadChildren: './staff/staff.module#StaffModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

Давайте добавим подписку к app.component.html, чтобы мы могли нажимать на ссылки для посещения различных частей нашего приложения.

<div style="text-align:center">
<button routerLink="">Home</button>
<button routerLink="/admin">Admin</button>
<button routerLink="/staff">Staff</button>
<h1>Welcome to {{ title }}!</h1>
</div>
<router-outlet></router-outlet>

Тег «router-outlet» - это то место, где будут отображаться наши представления маршрута.

К этому времени, когда вы сохраните свои файлы, вы должны увидеть 3 разных файла фрагментов (admin-admin-module.js, main.js, staff-staff-module.js), которые создаются в журналах «ng serve». . Если журналы не отображаются, как указано ниже, попробуйте убить и повторно запустить «ng serve».

chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 11.3 kB  [rendered]
chunk {main} main.js, main.js.map (main) 12.4 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 8.05 kB [entry] [rendered]
chunk {staff-staff-module} staff-staff-module.js, staff-staff-module.js.map (staff-staff-module) 7.59 kB  [rendered]

Это означает, что наше приложение разделено на 3 части

  1. Корневой чанк (app.module)
  2. Блок, специфичный для администратора (admin.module)
  3. Фрагмент персонала (Staff.module)

(Если не работает, попробуйте убить службу ng и перезапустить ее)

Как только все заработает и компилируется должным образом, откройте вкладку Chrome dev tools / Network и перезагрузите страницу.

Вы увидите, что все необходимые файлы загружены.

После того, как вы нажмете кнопку администратора, вы увидите, что новый сетевой запрос выполняется для получения блока, определенного администратором, и то же самое произойдет, когда вы нажмете кнопку персонала.

Удачной ленивой загрузки :)

Проверьте работающую версию приложения:

Https://bnmiprkr.github.stackblitz.io/

Скачать код

Обратите внимание на более прохладную версию приложения:

Https://yqniawkn.github.stackblitz.io/

Хотите узнать, как сделать его немного красивее за 4 шага, ознакомьтесь с следующим постом о том, как добавить Angular Material в этот проект :)