角度延迟加载子模块

Question

我有一个在多个级别使用延迟加载的应用程序。 '/' 的初始路径在主 app.routes 中被捕获并重定向到延迟加载的模块。该模块也有自己的 submodule-1.routes 并且只是其他功能模块的容器。在 submodule-1.routes 中，我懒加载功能模块。据我所知，模块似乎没有被延迟加载。

我尝试在 submodule-1 本身中创建路由，并从那里延迟加载功能模块，但这没有帮助。

下面是文件夹结构

app
app.module.ts
app.routing-module.ts
-modules
--login
---login.module.ts
---login-routing.module.ts
---pages
----login-user
-----login-user.module.ts(LoginUserPageModule)
-----login-user-page.ts(LoginUserPage)
--signup
---signup.module.ts
---signup-routing.module.ts
----pages
-----signup-email
------signup-email.module.ts(SignUpEmailPageModule)
------signup-email-page.ts(SignUpEmailPage)

以下是我在 app.routes.ts 中的主要路线：

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

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'signup-email', loadChildren: './modules/signup/signup.module#SignupModule' },
  { path: 'login', loadChildren: './modules/login/login.module#LoginModule' },

];

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

注册模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SignupRoutingModule } from './signup-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    SignupRoutingModule
  ],
  exports:[]
})
export class SignupModule { }

SignupRoutes.ts

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

export const SIGNUP_ROUTES: Routes = [
    {
        path: '',
        loadChildren: './pages/signup-email/signup-email.module#SignupEmailPageModule'
    }
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(SIGNUP_ROUTES)
  ],
  exports: [RouterModule]
})
export class SignupRoutingModule { }

注册电子邮件页面模块

import { SignupEmailPage } from './signup-email.page';

const routes: Routes = [
  {
    path: '',
    component: SignupEmailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule
    ,RouterModule.forChild(routes)
  ],
  declarations: [SignupEmailPage]
})
export class SignupEmailPageModule {}

登录模块

@NgModule({
  declarations: [],
  imports: [
    LoginRoutingModule
  ],
  providers:[
  ]
})
export class LoginModule { }

登录路由

export const LOGIN_ROUTES: Routes = [
    {
        path: '',
        loadChildren: './pages/login-user/login-user.module#LoginUserPageModule'
    }
];


@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(LOGIN_ROUTES)
  ],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

登录用户页面模块

const routes: Routes = [
  {
    path: '',
    component: LoginUserPage
  }
];

@NgModule({
  imports: [
    IonicModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  declarations: [LoginUserPage]
})
export class LoginUserPageModule {}

由于“/”的默认路径被定向到正在工作的登录，我希望注册模块是延迟加载的，并且只可见一次。然而，下面是我在应用程序初始加载时从 Augury 看到的图像，这使得 LoginModule 和 SignupEmailModule 似乎都被多次加载，并且根本没有延迟加载。结果，我看到 LoginUserPage 和 SignupEmailPage 已经从 Augury 加载，如下图所示。

从 app.routing.ts 中删除 { preloadingStrategy: PreloadAllModules } 之后。我确实看到模块现在是延迟加载的，但是，当我访问每个延迟加载的模块时，我会在下面的 Augury 图中看到一个额外的“延迟”节点。我不知道为什么会这样，如果它应该在那里？

此外，每当加载延迟加载的路由时，另一条路由会返回显示为延迟，它不应该只是从那时起保持加载吗？为什么它在图表中回到显示为“惰性”，几乎就像它没有加载一样。

访问默认路径后的八卦图也是延迟加载的

访问“注册”页面的延迟加载路由后的八卦图

Answer 1

在您的app.routes.ts 中设置preloadingStrategy: PreloadAllModules，这意味着您的模块正在被预加载。因此，不是在第一次请求（延迟）时加载模块，而是在后台异步加载模块。这是一种介于渴望加载和延迟加载之间的策略，但这意味着您的所有模块最终都会被加载。来自documentation:

每次成功导航后，路由器都会在其配置中查找可以预加载的未加载模块。它是否预加载一个模块，以及它预加载哪些模块，取决于预加载策略。

路由器提供了两种开箱即用的预加载策略：

• 默认不预加载。延迟加载的特征区域仍然按需加载。
• 预加载所有延迟加载的功能区域。