로그인 구성 요소가 앵글 4에서 초기에로드하는 데 많은 시간이 걸리고 있습니다.

Question

위에서 보셨 듯이 메인 모듈에는 5 개가 있습니다. 로그인 할 때로드하는 데 14 초 정도 걸립니다. 로그인 구성 요소가 전체 레이아웃을 기다리고 있다고 생각합니다. 구성 요소.

게으른 로딩을 올바르게 처리 한 사람이라면 누구든지 조언을 구할 수 있습니까? 여기에서 수행하는 방법이 아닙니까?

은> 대시 보드 routing.module.ts

전혀 게으른 로딩하지

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

import { DashboardComponent } from '../pages/dashboard.component'; 
import { LiveTestComponent } from '../pages/livetest.component'; 
import { ActiveTestComponent } from '../pages/activetest.component'; 
import { TestsComponent } from '../pages/tests.component'; 
import { EditTestsComponent } from '../pages/editTests.component'; 
import { GroupDetailsComponent } from '../pages/groupDetails.component'; 
import { CandidatesComponent } from '../pages/candidates.component'; 
import { SubjectsComponent } from '../pages/subjects.component'; 
import { SubjectsDetailsComponent } from '../pages/subjectsDetails.component'; 
import { AuthGuard } from '../auth/guards/auth.guard'; 

const routes: Routes = [ 
    {path: '',component: DashboardComponent,canActivate: [AuthGuard],data: {title: 'Dashboard'}}, 
    {path: 'dashboard',component: DashboardComponent,canActivate: [AuthGuard],data: {title: 'Dashboard'}}, 
    {path: 'tests',component: TestsComponent,canActivate: [AuthGuard],data: {title: 'Tests'}}, 
    {path: 'edit-test',component: EditTestsComponent,canActivate: [AuthGuard],data: {title: 'Edit Tests'}}, 
    {path: 'groupDetails',component: GroupDetailsComponent,canActivate: [AuthGuard],data: {title: 'Group Details'}}, 
    {path: 'candidates',component: CandidatesComponent,canActivate: [AuthGuard],data: {title: 'Candidates Detail'}}, 
    {path: 'subjects',component: SubjectsComponent,canActivate: [AuthGuard],data: {title: 'Candidates Detail'}}, 
    {path: 'subjectsDetails',component: SubjectsDetailsComponent,data: { title: 'Subjects Detail'}}, 
    {path: 'livetests',component: LiveTestComponent,canActivate: [AuthGuard],data: {title: 'Live Test Details'}}, 
    {path: 'activetests',component: ActiveTestComponent,canActivate: [AuthGuard],data: {title: 'Live Test Details'}} 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class DashboardRoutingModule {} 

} 

Answer 1

>

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

    import { AuthGuard } from '../auth/guards/auth.guard'; 
    import { HomeComponent } from '../pages/home.component'; 
    import { AccountSettingComponent } from '../pages/accountSetting.component'; 
    import { ForgotPasswordComponent } from '../pages/forgotPassword.component'; 
    import { ForgotPasswordFormComponent } from '../pages/forgotPasswordForm.component'; 
    import { LoginComponent } from '../auth/login/login.component'; 
    import { RegisterComponent } from '../auth/login/register.component'; 
    import { ConfirmEmailComponent } from '../auth/login/confirm-email.component'; 
    import { DashboardComponent } from '../pages/dashboard.component'; 
    import { LiveTestComponent } from '../pages/livetest.component'; 
    import { ActiveTestComponent } from '../pages/activetest.component'; 
    import { TestsComponent } from '../pages/tests.component'; 
    import { EditTestsComponent } from '../pages/editTests.component'; 
    import { GroupDetailsComponent } from '../pages/groupDetails.component'; 
    import { CandidatesComponent } from '../pages/candidates.component'; 
    import { SubjectsComponent } from '../pages/subjects.component'; 
    import { SubjectsDetailsComponent } from '../pages/subjectsDetails.component'; 

    // Layouts 
    import { FullLayoutComponent } from '../layouts/full-layout.component'; 

    export const routes: Routes = [ 
     {path: '',redirectTo: 'home',pathMatch: 'full'}, 
     {path: 'login',component: LoginComponent,data: {title: 'Login'}}, 
     {path: 'home',component: HomeComponent,data: {title: 'Home'}}, 
     {path: 'register',component: RegisterComponent,data: {title: 'Register'}}, 
     {path: 'confirm-email/:VerificationCode',component: ConfirmEmailComponent,data:{title: 'Confirm Email'}}, 
     {path: 'forgot-password',component: ForgotPasswordComponent,data: {title: 'Forgot Paaword'}}, 
     {path: 'dashboard',component: FullLayoutComponent,canActivate: [AuthGuard],data: {title: 'Home'}, 
     children: [ 
      { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], data: { title: 'Dashboard' } }, 
      {path: 'account-setting',component: AccountSettingComponent,canActivate: [AuthGuard],data: {title: 'Account Setting'}}, 
      {path: 'forgotPassword-form',component: ForgotPasswordFormComponent,canActivate: [AuthGuard],data: {title: 'Forgot Password Form'}}, 
      {path: 'tests',component: TestsComponent,canActivate: [AuthGuard],data: {title: 'Tests'}}, 
      {path: 'edit-test',component: EditTestsComponent,canActivate: [AuthGuard],data: {title: 'Edit Tests'}}, 
      {path: 'candidateGroups',component: GroupDetailsComponent,canActivate: [AuthGuard],data: {title: 'Group Details'}}, 
      {path: 'candidates',component: CandidatesComponent,canActivate: [AuthGuard],data:{title: 'Candidates Detail'}}, 
      {path: 'subjects',component: SubjectsComponent,canActivate: [AuthGuard],data: {title: 'Candidates Detail'}}, 
      {path: 'subjectsDetails',component: SubjectsDetailsComponent,canActivate: [AuthGuard],data: {title: 'Subjects Detail'}}, 
      {path: 'livetests',component: LiveTestComponent,canActivate: [AuthGuard],data: {title: 'Live Test Details'}}, 
      {path: 'activetest',component: ActiveTestComponent,canActivate: [AuthGuard],data: {title: 'Active Test Details'}} 
     ] 
     } 
    ]; 

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


    } 

을 app.routes.ts! 당신의 앱 라우팅 module.ts에서

: 당신의 pages.modulets에

const routes : Routes = [ 
    { 
    path: 'pages', 
    loadChildren: 'app/pages/pages.module#PagesModule', 
    }, { 
    path: 'auth', 
    component: AuthComponent, 
    children: [ 
     { 
     path: '', 
     component: LoginComponent, 
     }, { 
     path: 'login', 
     component: LoginComponent, 
     }, { 
     path: 'register', 
     component: RegisterComponent, 
     }, { 
     path: 'reset-password', 
     component: ResetPasswordComponent, 
     }, 
    ], 
    }, 
] 

:

@NgModule({ 
    imports: [ 
    PagesRoutingModule, <---- 
    ...], 
declarations:[...] 
}) 

여기

는 모듈 PagesModule 게으른 로딩이있는 예이다 귀하의 페이지에서 routing-module.ts :

const routes: Routes = [ 
    { 
    path: '', 
    canActivate: [AuthGuard], 
    component: PagesComponent, 
    children: [ 
     { 
     path: 'dashboard', 
     component: DashboardComponent, 
     }, { 
     path: 'ui-features', 
     loadChildren: './ui-features/ui-features.module#UiFeaturesModule', 
     }, { 
     path: 'components', 
     loadChildren: './components/components.module#ComponentsModule', 
     } 
    ]} 
]