面试题：Angular中懒加载模块的基本配置步骤

创建路由模块：
- 使用Angular CLI命令生成路由模块，例如，假设要为products模块创建路由模块，在项目根目录下运行：
```
ng generate module products --routing
```
这会在src/app/products目录下生成products.module.ts和products - routing.module.ts。products - routing.module.ts是专门用于配置该模块路由的文件。

配置路由：

在生成的路由模块（如products - routing.module.ts）中，配置路由。例如：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product - list/product - list.component';

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

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ProductsRoutingModule {}

这里定义了一个基本路由，当访问products模块路径时，会加载ProductListComponent。forChild方法用于子模块的路由配置。

在主路由模块中启用懒加载：
- 在主路由模块（通常是app - routing.module.ts）中，配置懒加载。例如：
```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

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

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}
```
- 这里通过loadChildren属性来实现懒加载。loadChildren接受一个函数，该函数使用动态import()语法来异步加载products模块。当访问/products路径时，才会加载products.module.ts及其相关资源，从而实现懒加载功能。
在模块中启用懒加载相关配置（可选，但推荐）：
- 在懒加载模块（如products.module.ts）中，可以进行一些优化配置。例如，将一些服务配置为providedIn: 'root'，以确保服务在应用根级别提供，避免在懒加载模块多次加载相同服务实例。
```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductService } from './product.service';

@NgModule({
    declarations: [],
    imports: [CommonModule],
    providers: [
        {
            provide: ProductService,
            useClass: ProductService,
            providedIn: 'root'
        }
    ]
})
export class ProductsModule {}
```
- 这样，ProductService会在应用启动时就被创建并提供给整个应用，而不是在懒加载模块加载时重复创建。

星途面试题库

面试题：Angular中懒加载模块的基本配置步骤

知识考点

面试题答案