Angular10中如何为education、transport模块搭建规范文件夹结构

核心设计思路 #

完全匹配你当前规划的业务层级，严格遵循Angular模块化开发规范，拆分粒度刚好适配后续懒加载、权限隔离、公共逻辑抽离的需求，可有效避免文件摆放混乱、跨目录依赖的常见问题。

完整目录层级（从src/app根目录开始） #

• app.module.ts 根模块：仅注册全局通用依赖，不直接挂载任何业务组件
• core/ 全局核心目录：存放和业务无关的全局拦截器、路由守卫、通用服务，所有模块仅在这里导入一次
• shared/ 全局共享目录：存放跨业务复用的通用UI组件、管道、指令，不存放特定业务逻辑
• education/ 教育业务一级入口
  • education.module.ts 教育业务根模块
  • education-routing.module.ts 教育业务路由配置
  • school/ 中小学二级子板块
    • school.module.ts 中小学独立子模块，支持单独懒加载、挂载专属路由守卫
    • school-routing.module.ts 中小学板块路由配置
    • 1std/ 一年级组件目录
      • 1std.component.ts
      • 1std.component.html
      • 1std.component.css
      • 1std.component.spec.ts 单元测试文件
    • 2std/ 二年级组件目录
      • 2std.component.ts
      • 2std.component.html
      • 2std.component.css
      • 2std.component.spec.ts
    • 3std/ 三年级组件目录
      • 3std.component.ts
      • 3std.component.html
      • 3std.component.css
      • 3std.component.spec.ts
  • college/ 高等教育二级子板块
    • college.module.ts 高等教育独立子模块
    • college-routing.module.ts 高等教育板块路由配置
    • arts/ 文科专业组件目录
      • arts.component.ts
      • arts.component.html
      • arts.component.css
      • arts.component.spec.ts
    • engg/ 工程专业组件目录
      • engg.component.ts
      • engg.component.html
      • engg.component.css
      • engg.component.spec.ts
    • diploma/ 专科/文凭类组件目录
      • diploma.component.ts
      • diploma.component.html
      • diploma.component.css
      • diploma.component.spec.ts
• transport/ 交通业务一级入口
  • transport.module.ts 交通业务根模块
  • transport-routing.module.ts 交通业务路由配置
  • cycle/ 自行车二级子板块
    • cycle.module.ts 自行车独立子模块
    • cycle-routing.module.ts 自行车板块路由配置
    • small/ 小型自行车组件目录
      • small.component.ts
      • small.component.html
      • small.component.css
      • small.component.spec.ts
    • medium/ 中型自行车组件目录
      • medium.component.ts
      • medium.component.html
      • medium.component.css
      • medium.component.spec.ts
    • large/ 大型自行车组件目录
      • large.component.ts
      • large.component.html
      • large.component.css
      • large.component.spec.ts
  • bike/ 摩托车二级子板块
    • bike.module.ts 摩托车独立子模块
    • bike-routing.module.ts 摩托车板块路由配置
    • pulsar/ Pulsar摩托组件目录
      • pulsar.component.ts
      • pulsar.component.html
      • pulsar.component.css
      • pulsar.component.spec.ts
    • honda/ 本田摩托组件目录
      • honda.component.ts
      • honda.component.html
      • honda.component.css
      • honda.component.spec.ts
    • 注：原规划中的hundai为拼写错误，对应现代品牌的正确拼写为hyundai，请按正确拼写命名目录
    • hyundai/ 现代摩托组件目录
      • hyundai.component.ts
      • hyundai.component.html
      • hyundai.component.css
      • hyundai.component.spec.ts

落地实操注意事项 #

• 所有一级、二级业务模块统一在根路由中配置懒加载，不要直接把业务组件挂载到根路由下，示例配置：

根路由懒加载写法：path: 'education', loadChildren: () => import('./education/education.module').then(m => m.EducationModule)

• 每个NgModule仅声明自身目录下的组件，不要跨目录导入其他子模块的私有组件，避免模块依赖混乱
• 仅当前子板块使用的服务、接口类型、静态资源，直接存放在对应子板块的目录下即可，不要全部堆到shared目录造成冗余
• 组件名称和所属目录名保持完全一致，减少后续维护时的查找成本

内容的提问来源于stack exchange，提问作者Sharu