面试题：Angular懒加载与路由配置的深度关联及优化

1. 通过合理设置路由参数优化懒加载性能 - 避免不必要模块加载

在Angular中，使用懒加载时，可通过以下方式合理设置路由参数来避免不必要的模块加载：

延迟加载模块路径：在路由配置中，使用loadChildren属性指定懒加载模块的路径。例如：

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

这样只有当用户真正访问/lazy - loaded - module路径时，才会加载该模块，而不是在应用启动时就加载。

路由守卫：利用路由守卫（如CanLoad）来控制模块是否应该被加载。例如：

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanLoad {
  constructor(private authService: AuthService, private router: Router) {}

  canLoad(route: Route): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }
}

然后在路由配置中使用这个守卫：

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

这样只有当用户通过身份验证（AuthService.isLoggedIn()返回true）时，才会加载protected - lazy - module模块，避免了未授权用户加载不必要的模块。

2. 路由嵌套场景下懒加载的工作方式

在路由嵌套场景中，懒加载依然基于loadChildren属性工作。假设我们有一个主模块和一个懒加载的子模块，且子模块有自己的嵌套路由。

主路由配置：

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

懒加载的子模块路由配置：

const childRoutes: Routes = [
  {
    path: 'child - route - 1',
    component: ChildComponent1
  },
  {
    path: 'child - route - 2',
    loadChildren: () => import('./child - lazy - sub - module/child - lazy - sub - module.module').then(m => m.ChildLazySubModule)
  }
];

在这种情况下，当用户访问/parent - lazy - module时，ParentLazyModule被懒加载。如果用户进一步访问/parent - lazy - module/child - route - 2，则ChildLazySubModule会被懒加载。Angular会根据用户当前访问的完整路径，按顺序加载相应的懒加载模块及其嵌套的懒加载模块，从而实现按需加载，提高应用性能。

面试题：Angular懒加载与路由配置的深度关联及优化

知识考点

面试题答案

1. 通过合理设置路由参数优化懒加载性能 - 避免不必要模块加载

2. 路由嵌套场景下懒加载的工作方式