Angular Project Structure for Modularity and Reusability

This note outlines an Angular folder structure with core, features, and shared modules to keep the app modular and reusable.

Takahiro Iwasa

2021-10-29

3 min read

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 or shared 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.

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 rule that keeps this structure from decaying is directional: core must never reference features or shared, and features may depend on core and shared but never on each other directly. That one-way flow is what makes each feature module’s boundaries predictable — anything a feature needs that isn’t specific to it belongs in core or shared instead of a cross-feature import. The style guide’s seven-file threshold for introducing subdirectories is a reasonable trigger for when a shared/services or core/guards folder is getting crowded enough to warrant splitting further.