Question

如您所见，主模块中有5个。在尝试加载登录时，需要14秒才能加载。我认为登录组件正在等待全部布局组件。

如果我已正确处理延迟加载，有人可以请一些建议。如果没有在这里怎么办？

＆GT; 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 { }


    }

＆GT;仪表板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具有延迟加载的示例：

你的app-routing-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:[...]
})

并在你的pages-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',
      }
   ]}
]

登录组件花费大量时间以角度4加载

1 个答案: