angularstructure

Folder Structure
As we move towards making the project highly scalable, the folder structure is amongst the important things that we are going to be focusing on.
A good folder structure ensures that we have a good and consistent way of doing things and everybody on the team always knows where everything belongs.
We are going to maintain the following folder structure explained below.
     |-- modules
       |-- home
           |-- [+] components
           |-- [+] pages
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] mocks
       |-- [+] services
       |-- [+] header
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
          |-- [+] models
     |

     |-- [+] configs
|-- assets
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss
Modules
Modules enable us to separate our logic based on how components interact in the codebase. In this approach, every component will be required to be inside a module, below is an example of a home module for the homepage.
|-- modules
       |-- home
           |-- components
           |-- pages
           |    |-- home
           |         |-- home.component.ts|html|scss|spec
           |
           |-- home-routing.module.ts
           |-- home.module.ts
The Core Module
The CoreModule should contain singleton services (which is usually the case), universal components, and other features where there’s only once instance per application.
|-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] mocks
       |-- [+] services
       |-- [+] header
       |-- core.module.ts
The authentication folder simply handles the authentication-cycle of the user (from login to logout).
|-- authentication
     |-- authentication.service.ts|spec.ts
The http folder handles stuff like http calls from our application.
This is where all the services should go.
|-- http
     |-- students
          |--student.service.ts|spec.ts
The interceptors folder is a collection of interceptors.
|-- interceptors
       |-- error.interceptor.ts
       |-- auth.interceptor.ts
       |-- http.token.interceptor.ts
The guards folder contains all of the guards used to protect different routes in the application.
|-- guards
     |-- auth.guard.ts
     |-- no-auth-guard.ts
     |-- admin-guard.ts 
All additional singleton services are placed inside the services folder. A good example can be a logger service
|-- services
     |-- logger.service.ts|spec.ts
     |-- srv2.service.ts|spec.ts
The Shared Module
The SharedModule is where any shared components, pipes/filters should go.
The SharedModule can be imported in any other module when those items will be re-used.
The shared module shouldn’t have any dependency on the rest of the application and should therefore not rely on any other module.
|-- shared
     |-- [+] components
     |-- [+] directives
     |-- [+] pipes
The components folder contains all the “shared” components.
These are components like loaders and buttons, which multiple components would benefit from.
|-- components
     |-- loader
          |-- loader.component.ts|html|scss|spec.ts
     |-- buttons
          |-- favorite-button
               |-- favorite-button.component.ts|html|scss|spec.ts
          |-- collapse-button
               |-- collapse-button.component.ts|html|scss|spec.ts
The directives , pipes and models folders contains the directives, pipes and models used across the application.
|-- directives
      |-- auth.directive.ts|spec.ts
|-- pipes
     |-- capitalize.pipe.ts
     |-- safe.pipe.ts
|-- models
     |-- user.model.ts
     |-- server-response.ts
Styling
The global styles for the project are placed in a scss folder under assets .
|-- scss
     |-- partials
          |-- _layout.vars.scss
          |-- _responsive.partial.scss
     |-- _base.scss
|-- styles.scss
The scss folder does only contain one folder — partials.
Partial-files can be imported by other scss files.
Lazy Loading
The application uses lazy-loading, which means the module isn’t loaded before the user actually accesses the route.
By using the structure described in the “Modules”-section, we can easily refer to each module in our main app-routing file.