typescript - Hvordan definere en svært skalerbar mappestruktur for ditt Angular 6-prosjekt?

Jeg lærer akkurat mer om Angular 6 og dets kjernefunksjoner. Jeg er litt forvirret over hvilken mappestruktur jeg bør bruke for Angular 6. Jeg har brukt forskjellige strukturer fra ulike opplæringer, for eksempel TraversyMedia, Udemy, og listen fortsetter. Alle bruker forskjellige mappestrukturer avhengig av prosjektet.

her er grunnleggende mappestruktur fra Angular-dokumentasjonen

her er hva jeg har prøvd etter å ha søkt og søkt

└───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

Hvilken type bør jeg bruke for et ekte verdensapplikasjonseksempel fra Angular eller den jeg har designet selv? Vennligst del strukturen din hvis du mener den er mye bedre enn det jeg har. Takk

Svar #1

Jeg bruker nedenfor mappestruktur for de svært skalerbare Angular-applikasjonene. Nedenstående mappestruktur er opprettet basert på beste praksis fra fellesskapet, andre GitHub Angular-prosjekter og mine egne erfaringer fra å jobbe med noen Angular-prosjekter.

|-- app

     |-- [+] configs
     |
     |
     |-- core
       |-- [+] authentication
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] layout
       |-- [+] mocks
       |-- [+] services
       |-- [+] strategies
       |-- core.module.ts
       |-- router.animations.ts
       |-- template-core.module.ts
       |-- theme.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts    
     |
     |     
     |-- modules
       |-- client
           |-- [+] components
           |-- client-routing.module.ts
           |-- client.module.ts
       |--- [+] other modules

     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
          |-- [+] models
          |-- [+] module
      |
      |-- app-routing.module.ts
      |-- app.module.ts
      |-- etc ...
      |
|-- assets
     |-- images
     |-- icons
     |-- css
          |-- styles.scss

Jeg har opprettet GitHub-høy-nivå Angular-demo-prosjektet «angular6-realworld-highly-scalable-application» for fremtidig referanse.

Github-lenke: https://github.com/rajaramtt/angular6-realworld-highly-scalable-application

En av de nyttige Medium-referanselenkene: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7