Angular 6 + SASS Folder Structure

Question

What is the best Folder structure we can maintain for large project ( More than one page ).I am a beginner for sass and angular.please help me to get understand about folder structure.

Answer 1

Here is my take of a well structured, organized and scaleable architecture for Angular solutions:

- app
  - core
    - guards
    - interceptors
    - models
    - services [self-provide in root, hence no need for a CoreModule]
      - auth
      - http
      - storage
  - features
    - heroes
      - components [pure presentation components, get data from page attributes]
      - pages [routed components, get data from services, send to components via attributes]
      - services [if only used in this feature]
      - models [if only used in this feature]
      - heroes-routing.module.ts
      - heroes.module.ts
  - shared
    - components [footer, header, calendar, dropdowns etc.]
    - directives
    - pipes
    - validators
    - shared.modules.ts [require CommonModule, FormsModule etc.]
  - app-routing.module.ts
  - app.component.html
  - app.module.ts
- assets
  - fonts
  - i18n
  - icon
  - images

Inspiration reference Planning the Architecture of your Angular App, feb. 2019