如何为Angular 6项目定义高度可扩展的文件夹结构？

Question

我只是在学习有关angular 6及其核心功能的更多信息，我对应使用哪种文件夹结构处理angular 6感到有些困惑，我使用了来自不同教程的不同结构，例如traversymedia，udemy和list等等，每个人都根据项目使用不同的文件夹结构。

这是来自角度文档的基本文件夹结构

这是我在搜索和搜索后尝试过的内容

└───src
    ├───app
    │   ├───layout
    │   │   ├───admin
    │   │   │   ├───breadcrumbs
    │   │   │   └───title
    │   │   └───auth
    │   ├───pages
    │   │   ├───animations
    │   │   ├───authentication
    │   │   │   ├───forgot
    │   │   │   ├───lock-screen
    │   │   │   ├───login
    │   │   │   │   ├───with-bg-image
    │   │   │   │   ├───with-header-footer
    │   │   │   │   ├───with-social
    │   │   │   │   └───with-social-header-footer
    │   │   │   └───registration
    │   │   │       ├───multi-step
    │   │   │       ├───with-bg-image
    │   │   │       ├───with-header-footer
    │   │   │       ├───with-social
    │   │   │       └───with-social-header-footer
    │   │   ├───change-log
    │   │   ├───charts
    │   │   │   ├───c3-js
    │   │   │   ├───chart-js
    │   │   │   ├───echart
    │   │   │   ├───google
    │   │   │   ├───knob
    │   │   │   ├───peity
    │   │   │   ├───radial
    │   │   │   └───sparklines
    │   │   ├───dashboard
    │   │   │   ├───dashboard-analytics
    │   │   │   ├───dashboard-crm
    │   │   │   ├───dashboard-default
    │   │   │   ├───dashboard-ecommerce
    │   │   │   └───dashboard-project
    │   │   ├───invoice
    │   │   │   ├───basic-invoice
    │   │   │   ├───list-invoice
    │   │   │   └───summary-invoice
    │   │   ├───maintenance
    │   │   │   ├───coming-soon
    │   │   │   ├───error
    │   │   │   └───offline-ui
    │   │   ├───map
    │   │   │   ├───google-map
    │   │   │   └───vector
    │   │   ├───simple-page
    │   │   ├───task
    │   │   │   ├───board-task
    │   │   │   ├───details-task
    │   │   │   ├───issue-task
    │   │   │   └───list-task
    │   │   ├───ui-elements
    │   │   │   ├───advance
    │   │   │   │   ├───modal
    │   │   │   │   ├───notifications
    │   │   │   │   └───notify
    │   │   │   ├───basic
    │   │   │   │   ├───accordion
    │   │   │   │   ├───alert
    │   │   │   │   ├───breadcrumb
    │   │   │   │   ├───button
    │   │   │   │   ├───generic-class
    │   │   │   │   ├───label-badge
    │   │   │   │   ├───tabs
    │   │   │   │   ├───typography
    │   │   │   │   └───ui-other
    │   │   │   ├───crm-contact
    │   │   │   ├───editor
    │   │   │   │   ├───froala-edit
    │   │   │   │   └───quill-edit
    │   │   │   ├───file-upload
    │   │   │   ├───forms
    │   │   │   │   ├───add-on
    │   │   │   │   ├───advance-elements
    │   │   │   │   ├───basic-elements
    │   │   │   │   ├───form-validation
    │   │   │   │   ├───masking
    │   │   │   │   ├───picker
    │   │   │   │   └───select
    │   │   │   └───tables
    │   │   │       ├───bootstrap-table
    │   │   │       │   ├───basic-bootstrap
    │   │   │       │   ├───border
    │   │   │       │   ├───sizing
    │   │   │       │   └───styling
    │   │   │       └───data-table
    │   │   │           ├───basic-datatable
    │   │   │           ├───child-row
    │   │   │           ├───inline-edit
    │   │   │           ├───other-datatable
    │   │   │           ├───paging
    │   │   │           └───selection
    │   │   │               ├───cell
    │   │   │               ├───checkbox
    │   │   │               ├───multi-rows
    │   │   │               └───single-row
    │   │   ├───user
    │   │   │   ├───card
    │   │   │   └───profile
    │   │   └───widget
    │   │       ├───widget-advance
    │   │       ├───widget-chart
    │   │       ├───widget-data
    │   │       └───widget-static
    │   └───shared
    │       ├───accordion
    │       ├───card
    │       ├───element
    │       ├───fullscreen
    │       ├───menu-items
    │       ├───modal-animation
    │       ├───modal-basic
    │       ├───scroll
    │       └───spinner
    │           └───spinkit-css
    ├───assets
    │   ├───charts
    │   │   ├───amchart
    │   │   ├───echart
    │   │   ├───flot
    │   │   ├───knob
    │   │   ├───radial
    │   │   └───waterball
    │   ├───css
    │   ├───data
    │   ├───icon
    │   │   ├───icofont
    │   │   │   ├───css
    │   │   │   └───fonts
    │   │   └───svg-animated
    │   ├───images
    │   │   ├───auth
    │   │   ├───commingsoon
    │   │   ├───error
    │   │   ├───flags
    │   │   ├───mega-menu
    │   │   ├───modal
    │   │   ├───slider
    │   │   ├───task
    │   │   ├───tooltip
    │   │   ├───user-card
    │   │   │   └───card
    │   │   ├───user-profile
    │   │   │   └───follower
    │   │   └───widget
    │   ├───jq-vmap
    │   │   └───maps
    │   │       └───continents
    │   └───pages
    │       └───treeview
    └───environments

我应该使用哪种类型的角度或我自己设计的样例？如果您认为它的结构比我现有的结构好得多，请分享您的结构。谢谢

Answer 1

我将以下文件夹结构用于角度高度可扩展的应用程序。下面的文件夹结构是根据社区，其他GitHub Angular项目的最佳实践以及我在几个Angular项目中的经验得出的。

Animal

我创建了GitHub高级角度演示项目“ angular6-realworld-highly-scalable-application”，以供将来参考。

Github链接：https://github.com/rajaramtt/angular6-realworld-highly-scalable-application

其中一个有用的“媒体参考”链接：https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7