Angular Project Structure Explained

When you open an Angular project, it can feel like “too many files.” Let’s make it simple.

Key folders (the ones you actually use)

src/

This is where your app lives.

• src/main.ts boots your app
• src/app/ contains your components, routes, services
• src/styles.css global styles
• src/index.html single HTML page (Angular renders inside it)

App folder highlights

Typical structure:

src/app/
  app.component.ts
  app.component.html
  app.routes.ts
  core/
  shared/
  features/

Recommended organization (professional, scalable)

• core/: single-instance services (auth, api client, guards)
• shared/: reusable components/pipes (buttons, cards)
• features/: pages/modules by feature (billing, profile, admin)

Where do I write code first?

Start with:

• src/app/app.component.ts
• src/app/app.component.html

If your project uses standalone components, you will also see routing in:

• src/app/app.routes.ts

Next: Build your first component the right way.