登錄組件需要花費很多時間來初始角度加載4

Question

正如您所看到的，您在主模塊中有5個。在嘗試加載登錄時需要14秒加載。我認爲登錄組件正在等待fulllayout零件。

任何人都可以請諮詢，如果我已經適當地處理了懶加載。如果沒有如何做到這一點？

> app.routes.ts

{ 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 { } 


    } 

>儀表板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

這不是懶加載了！

這裏就是模塊PagesModule具有延遲加載的例子：

在你的應用的路由，module.ts

：

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, 
     }, 
    ], 
    }, 
] 

在pages.modulets

：

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

並在你的網頁中 - 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', 
     } 
    ]} 
]