面试题：Angular项目结构与懒加载

Question

阐述Angular中如何利用项目结构实现路由的懒加载。在实现懒加载时，对项目的模块结构和文件组织有哪些要求和注意事项？请给出一个简单的示例代码结构。

Answer 1

利用项目结构实现路由懒加载的方式

在Angular中，要实现路由懒加载，主要通过在路由配置中使用 loadChildren 来指定需要懒加载的模块。这样当访问到对应路由时，才会加载该模块。

模块结构要求

1. 独立的功能模块：每个需要懒加载的功能应该放在独立的NgModule中。这些模块应该有自己独立的业务逻辑、组件、服务等。
2. 路由配置：懒加载模块需要有自己的路由模块。在该路由模块中定义该模块内的路由配置。

文件组织注意事项

1. 模块文件位置：懒加载模块相关的文件应组织在一个独立的目录下，保持项目结构清晰。
2. 导入路径：在主路由配置中指定 loadChildren 时，要确保导入路径正确，相对路径或绝对路径要根据项目实际结构来确定。

示例代码结构

1. 项目结构

src/
├── app/
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── home/
│   │   ├── home.component.ts
│   │   ├── home.module.ts
│   │   ├── home-routing.module.ts
│   ├── feature/
│   │   ├── feature.component.ts
│   │   ├── feature.module.ts
│   │   ├── feature-routing.module.ts

2. app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

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

3. home-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

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

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

4. home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    HomeRoutingModule
  ]
})
export class HomeModule { }

类似地，feature 模块也有相同结构的 feature-routing.module.ts 和 feature.module.ts 等文件。