Разделение основного JS-пакета углового приложения на основе компонента

Question

Я разработал угловое 4 веб-приложение, которое имеет 3 компонента и все они являются независимыми компонентами.

LoginPage
FormPage
Dashboard

LoginPage и FormPage - это небольшие компоненты, но Dashboard - очень большой модуль.

Мои проблемы в том, что я не хочу загружать весь основной пакет (1,5 МБ) на странице входа в систему (при загрузке страницы, которая занимает больше времени для загрузки всего содержимого).я хочу загрузить блок JS, связанный с компонентом панели мониторинга, при загрузке компонента панели управления.

Я использую ng-build --prod для производственной сборки

Можно ли разбить основной комплект на основе jsна компонент?Могу ли я сделать то же разделение в JS поставщика тоже?

Answer 1

Вы можете иметь ленивые модули, используя Angular router loadChildren.В зависимости от URL доступа пользователя соответствующий модуль будет загружен по требованию.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const app_routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/login/login.module#LoginModule'
  },
  {
    path: 'dashboard',
    loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
  },
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: '**', pathMatch: 'full', redirectTo: '/login' }
];

@NgModule({
  imports: [RouterModule.forRoot(app_routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}