📂 Understanding Angular Project Structure — A Complete Beginner’s Guide

🏗 1. Creating a Angular 19 Project

If you don’t have a project yet, let’s create one:

ng new angular-structure-demo
cd angular-structure-demo
code .

---

📁 2. Angular 19 Default Folder Structure

When you run ng new, Angular CLI generates the following structure:

my-app/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.config.ts 
│   │   └── app.routes.ts 
│   ├── assets/
│   ├── environments/
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── index.html
│   ├── main.ts
│   ├── styles.scss
│   └── polyfills.ts
├── angular.json
├── package.json
├── tsconfig.json
├── tsconfig.app.json
└── README.md

---

🔍 3. Key Folders & Files Explained

📁 node_modules/

Contains all installed npm packages and dependencies.
⚠ Don’t edit this manually.

📁 src/

Main source code folder — everything here will be compiled into your app.

---

📁 src/app/

• app.component.ts → Main component logic.

• app.component.html → UI template.

• app.component.css → Component-specific styles.

• app.config.ts → App-wide configuration (new standalone approach).

• app.routes.ts → Routing setup if enabled during creation.

---

📁 assets/

Holds static files like images, JSON data, icons,config.json etc.

---

📁 environments/

• environment.ts → Development settings.

• environment.prod.ts → Production settings.

---

📄 angular.json

Angular CLI configuration — defines build options, styles, and scripts.

---

📄 package.json

Lists dependencies and npm scripts.

---

📄 tsconfig.json

TypeScript compiler configuration.

---

📄 index.html

Main HTML entry file — Angular injects the app here.

---

🧩 4. Scalable Feature-Based Structure (Recommended for Angular 19)

While the default structure works for small projects, for larger apps we use a feature-based approach:

src/
└── app/
    ├── core/           // Singleton services, guards, interceptors
    ├── shared/         // Reusable components, directives, pipes
    ├── features/       // Each feature has its own module & routing
    │   └── home/
    │       ├── components/
    │       ├── services/
    │       ├── home.routes.ts
    │       └── home.component.ts/html/css
    ├── layouts/        // Global layout components (header, footer)
    ├── app.config.ts
    ├── app.routes.ts
    └── main.ts

---

💡 Why This Structure Works for Angular 19

✅ Keeps code modular and organised
✅ Makes lazy loading easier
✅ Improves maintainability for large apps
✅ Helps teams work without conflicts

---

🎯 5. Quick Demo — Editing Your First Component

Open app.component.html and change the text:

<h1>Welcome to My First Angular 19 App 🚀</h1>

Save, and you’ll see the browser update instantly.

---

✅ Conclusion

Understanding the project structure is essential before writing real features.
we’ll explore Angular Components in Depth and start building UI.

---

📌 Tip: You can reorganise your Angular app into a feature-based structure from the start — it will make scaling much easier later.