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

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