Project Structure

Project Structure

What it means

An Angular CLI-generated project follows a conventional layout: application code lives in src/app/, static assets in src/assets/, and each component/service/pipe typically gets its own folder or file group (.ts, .html, .css, .spec.ts). Modern Angular favors a feature-based structure — grouping files by what they do (e.g. orders/, users/) rather than by file type (all components in one folder, all services in another).

Examples

src/
├── app/
│   ├── app.component.ts
│   ├── app.config.ts          # providers, routes (standalone app setup)
│   ├── core/                  # singleton services, guards, interceptors
│   │   └── auth.service.ts
│   ├── shared/                 # reusable components/pipes used across features
│   │   └── loading-spinner.component.ts
│   └── features/
│       ├── users/
│       │   ├── user-list.component.ts
│       │   ├── user-list.component.html
│       │   ├── user-list.component.css
│       │   ├── user-list.component.spec.ts
│       │   └── user.service.ts
│       └── orders/
│           └── order-list.component.ts
├── assets/                     # images, fonts, static files
├── environments/                # environment.ts, environment.prod.ts
├── index.html
├── main.ts                      # bootstraps the app
└── styles.css                   # global styles

Common mistake

Dumping every component into one flat components/ folder as the app grows — this works fine for small apps, but quickly becomes hard to navigate, since related files (a feature’s component, service, and tests) end up scattered rather than grouped together.

# Grows painfully as the app scales
src/app/components/
├── user-list.component.ts
├── order-list.component.ts
├── product-list.component.ts
├── ... (50 more components, no grouping)

# Feature-based grouping keeps related files together
src/app/features/
├── users/ (user-list.component.ts, user.service.ts, ...)
├── orders/ (order-list.component.ts, order.service.ts, ...)

Quick practice

1. Where does the bulk of an Angular application’s code live in the default CLI structure?

   Answer

   src/app/.

2. What’s the difference between organizing by “feature” versus by “file type”?

   Answer

   Feature-based grouping keeps everything related to one part of the app (component, service, tests) together in one folder; type-based grouping puts all components in one folder, all services in another, scattering related files as the app grows.

3. What’s a common purpose for a core/ folder in a feature-based Angular project?

   Answer

   Singleton, app-wide concerns like authentication services, HTTP interceptors, and route guards — things meant to be used once across the whole app, not per-feature.