How to define a highly scalable folder structure for your Angular 6 project?

Question

I am just learning more about angular 6 and its core features , I am confused a little bit about which folder structure I should USE for angular 6 , I have used different structures from different tutorials eg traversymedia, udemy and list goes on, everyone uses different folder structure depending on the project.

here is basic folder structure from angular docs

here is what I have tried after searching and searchning

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

Which type I should use for real world application sample from angular or the one I designed myself? please share your structure if you think its much better than what I have. thanks

Answer 1

I am using below folder structure for the angular highly scalable applications. The below folder structure is created based on best practices from the community, other GitHub Angular projects and my own experiences from working on a couple of Angular projects.

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

I have created the GitHub high-level angular demo project "angular6-realworld-highly-scalable-application" for future reference.

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

One of the useful Medium Reference link: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7