面试题：Angular模块懒加载中路由配置的关键要点

Question

在Angular中实现模块懒加载时，路由配置方面需要注意哪些关键要点？请阐述如何在路由模块中正确配置以启用懒加载，并说明`loadChildren`属性的作用及使用方式。

Answer 1

路由配置关键要点

1. 独立路由模块：为每个需要懒加载的功能模块创建独立的路由模块，这样可以将路由逻辑分离，提高代码的可维护性。
2. 使用 loadChildren：通过 loadChildren 来指定懒加载模块的路径和模块名，避免直接导入模块，从而实现按需加载。

正确配置启用懒加载步骤

1. 在主路由模块（通常是 app-routing.module.ts）中，配置路由时使用 loadChildren 语法。例如：

const routes: Routes = [
  {
    path: 'lazy - loaded - module',
    loadChildren: () => import('./lazy - loaded - module/lazy - loaded - module.module').then(m => m.LazyLoadedModule)
  }
];

2. 确保懒加载模块有自己独立的路由配置，在其对应的路由模块（如 lazy - loaded - module - routing.module.ts）中定义该模块内的路由。

loadChildren属性的作用及使用方式

• 作用：loadChildren 用于告诉 Angular 在需要时才加载指定的模块，而不是在应用启动时就加载所有模块，从而提高应用的初始加载性能，减少首屏加载时间。
• 使用方式：它的值是一个函数，该函数返回一个 import() 表达式，import() 是 ES2020 引入的动态导入语法，返回一个 Promise。import() 表达式的参数是模块的相对路径，then 回调函数接收导入的模块，并返回该模块中要加载的 NgModule。如上述示例代码，import('./lazy - loaded - module/lazy - loaded - module.module') 动态导入模块，then(m => m.LazyLoadedModule) 返回要加载的具体 NgModule。