Angular › Angular CLI & Project Structure

What is the typical folder structure of a modern Angular project, and what does each main folder contain?

Intermediate

Answer

The src folder contains your actual application code, with an app folder holding your components, services, and other feature code. An assets folder holds images and static files, and an environments folder holds configuration values that differ between development and production builds.

src/
  app/
    components/
    services/
    app.component.ts
  assets/
    logo.png
  environments/
    environment.ts
    environment.prod.ts

Real-world example A growing project organizes its components and services into clearly separated folders inside the app directory, making it easy for new team members to quickly find the code they need to work on.

Common follow-ups: How should a very large project organize its code differently from a small one?;What is the purpose of having a separate environment.prod.ts file?

Build Environments & Deployment;Standalone Components