angular - 角度延迟加载子模块
问题描述
我有一个在多个级别使用延迟加载的应用程序。'/' 的初始路径在主 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 { }
注册路由.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 加载,如下图所示。
{ preloadingStrategy: PreloadAllModules }
从 app.routing.ts 中删除后。我确实看到模块现在是延迟加载的,但是,当我访问每个延迟加载的模块时,我会在下面的 Augury 图中看到一个额外的“延迟”节点。我不确定为什么会这样,如果它应该在那里?
此外,每当加载延迟加载的路由时,另一条路由会返回显示为延迟,它不应该只是从那时起保持加载吗?为什么它会回到图表中显示为“懒惰”,几乎就像它没有加载一样。
解决方案
在您的app.routes.ts
设置preloadingStrategy: PreloadAllModules
中,这意味着您的模块正在被预加载。因此,不是在第一次请求(延迟)时加载模块,而是在后台异步加载模块。这是一种介于渴望加载和延迟加载之间的策略,但这意味着您的所有模块最终都会被加载。从文档中:
每次成功导航后,路由器都会在其配置中查找可以预加载的已卸载模块。它是否预加载一个模块,以及它预加载哪些模块,取决于预加载策略。
路由器提供了两种开箱即用的预加载策略:
- 完全没有预加载,这是默认设置。延迟加载的特征区域仍然按需加载。
- 预加载所有延迟加载的功能区域。
推荐阅读
- angular - Html2Canvas 呈现完整的 div 内容
- swift - calendar.date(bySetting: .day, value: 1, of: Date()) 错误地总是加一个月
- python - PyQt QTableView 获取跨多列的单元格的起始索引?
- asciidoc - 从注释代码生成结构化文档
- python - 对多维 numpy 数组进行排序
- python - 监听简单表上的插入/更新事件
- airflow - 气流 UI 未显示所有 DAG
- java - 返回不同的值取决于倍值
- java - JVM在使用synchronized时如何保证被引用对象中成员变量修改的可见性?
- xml - 是否可以使用 ssis 将 XML 文件上传到 SQL 服务器