How to Structure an Angular Project for Modularity and Reusability

Takahiro Iwasa
2 min read
Angular
Directory Structure
- core
- Contains application-core functionality, including constants, guards, interceptors, models, and services.
- These are accessible by the
features
directory but should never reference features or shared components.
- features
- Each feature module resides here.
- These modules may reference
core
orshared
but must remain isolated from the rest of the application to maintain modularity.
- shared
- Contains reusable parts like directives, forms, pipes, and services.
- These are available to
features
but must avoid referencing them.
src/├── app/│ ├── core/│ │ ├── constants/│ │ ├── decorators/│ │ ├── guards/│ │ ├── interceptors/│ │ ├── interfaces/│ │ │ ├── api/│ │ ├── models/│ │ ├── resolvers/│ │ ├── services/│ │ │ ├── api/│ │ ├── validators/│ ├── features/│ │ ├── auth/│ │ │ ├── password-reset/│ │ │ ├── sign-in/│ │ │ ├── sign-up/│ │ │ ├── verify/│ │ │ ├── auth.module.ts│ │ │ ├── auth.service.ts│ │ │ ├── auth-routing.module.ts│ │ ├── .../│ ├── shared/│ │ ├── components/│ │ ├── directives/│ │ │ ├── attribute/│ │ │ ├── structural/│ │ ├── forms/│ │ │ ├── input/│ │ │ ├── select/│ │ │ ├── .../│ │ ├── pipes/│ │ ├── services/│ ├── app.component.ts│ ├── app.module.ts│ ├── app-routing.module.tsassets/environments/styles/tests/theme/global.scss
While the Angular coding style guide advises keeping directories flat, you should consider subdirectories when a folder exceeds seven files.
Consider creating sub-folders when a folder reaches seven or more files. – Angular coding style guide