面试题：Angular懒加载的基本路由配置

Question

请描述在Angular中如何配置一个简单的懒加载路由。假设我们有一个名为`admin`的模块，需要实现该模块的懒加载，给出相应的路由配置代码示例，并解释每个配置项的作用。

Answer 1

1. 路由配置代码示例： 在app-routing.module.ts文件中：

   const routes: Routes = [
     {
       path: 'admin',
       loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
     }
   ];
   

2. 配置项解释：
   • path: 'admin'：
     • 表示当URL路径中匹配到admin时，会触发对应的路由逻辑。这是路由的路径匹配规则，用户在浏览器地址栏输入的路径部分，当与这个path匹配时，就会加载对应的模块。
   • loadChildren：
     • 这是实现懒加载的关键配置项。它的值是一个函数，函数返回一个动态导入模块的Promise。在这里，import('./admin/admin.module')使用动态导入语法导入admin模块。then(m => m.AdminModule)表示导入成功后，从导入的模块中获取AdminModule。这样，只有当用户访问/admin路径时，才会加载AdminModule模块，从而实现了懒加载，提高了应用的初始加载性能。