Angular Project Structure for Modularity and Reusability

Organize an Angular application into core, features, and shared directories with clear dependency boundaries.

Takahiro Iwasa

2021-10-29

2 min read

Directory Structure

core
- Contains application-wide functionality, including constants, guards, interceptors, models, and services.
- Code in features can use this directory, but core should never reference features or shared code.
features
- Contains one directory for each feature module.
- Feature modules may reference core or shared, but should remain independent of one another.
shared
- Contains reusable code such as directives, forms, pipes, and services.
- Feature modules may use this code, but shared must not reference them.

Directory Structure

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.ts
assets/
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

Reference

Angular coding style guide

Conclusion

Organizing an Angular app into core, features, and shared directories, each with a defined dependency direction, keeps feature modules isolated and reusable code centralized.

The dependency direction keeps the boundaries clear: core must not reference features or shared, while feature modules may depend on core and shared but not directly on one another. Code that is not specific to one feature belongs in core or shared instead of being imported from another feature.

The style guide’s seven-file threshold provides a practical point at which to consider dividing directories such as shared/services or core/guards into smaller subdirectories.

Back to posts