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

2 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