角延迟加载子模块

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

SignupEmailPageModule

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

LoginRoutes

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

LoginUserPageModule

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

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

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

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

而且，每当加载了延迟加载的路由时，另一条路由就会回到显示为延迟，是否不应该从那时开始就保持加载状态？ 为什么它又回到图中显示为“懒惰”的状态，几乎就像它尚未加载一样。

访问默认路径（也是延迟加载）后的Augury图

访问“注册”页面的延迟加载路径后的Augury图

Answer 1

在app.routes.ts ，设置preloadingStrategy: PreloadAllModules ，这意味着模块已被预加载。 因此，不是在第一次请求时（延迟）加载模块，而是在后台异步加载模块。 这是介于急切加载和延迟加载之间的一种策略，但这意味着所有模块最终都将加载。 从文档中：

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

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

• 完全不预加载，这是默认设置。 延迟加载的要素区域仍按需加载。
• 预加载所有延迟加载的特征区域。