Angular Folders and Files

Lesson Goal

After creating an Angular app, many students see many folders and files and become confused. This lesson explains the purpose of every important folder and file.

1. Level 0 Idea

An Angular project is not one single file. It is a complete workspace. The workspace contains configuration files, source code, assets, dependencies, and build output.

2. Big Picture Diagram

This diagram shows the Angular project as a complete system.

3. Angular Folder Tree

A fresh Angular project may look similar to this. Exact files can vary slightly depending on Angular version, routing, CSS choice, SSR choice, and selected tools.

Copyprogrammers-picnic-angular-demo/
│
├── .angular/
├── .vscode/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── CNAME
│
├── src/
│   ├── app/
│   │   ├── app.config.ts
│   │   ├── app.css
│   │   ├── app.html
│   │   ├── app.routes.ts
│   │   ├── app.spec.ts
│   │   └── app.ts
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.spec.json
├── README.md
└── .gitignore

4. Root-Level Files and Folders

Root-level files live directly inside the project folder. They control the whole Angular project.

5. The src Folder

The src folder contains the actual application source code. This is where most real Angular development happens.

Copysrc/
├── app/
├── index.html
├── main.ts
└── styles.css

src/index.html

This is the browser’s first HTML file. It usually contains one important Angular root tag.

Copy<app-root></app-root>

src/main.ts

This file starts Angular. It connects the Angular application component with browser rendering.

Copyimport { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

src/styles.css

This file is for global CSS. Use it for body style, fonts, common classes, and layout rules that should affect the whole website.

Copybody {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #fff7ed;
  color: #241407;
}

6. The src/app Folder

The src/app folder is the heart of an Angular application. Most beginner edits happen here.

Copysrc/app/
├── app.config.ts
├── app.css
├── app.html
├── app.routes.ts
├── app.spec.ts
└── app.ts

7. Component Files

Angular apps are built using components. A component usually has three main parts.

Example Component

Copyimport { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  imports: [],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'Programmers Picnic Angular Demo';
}

What Each Part Means

8. How an Angular App Starts

When the browser opens the Angular website, files are loaded in a specific flow.

Start Flow in Simple Words

1. The browser opens index.html.
2. index.html contains <app-root>.
3. main.ts starts Angular.
4. Angular loads the root component.
5. The root component uses its HTML and CSS.
6. If routes exist, Angular loads the page for the current URL.

9. Assets and Public Files

Angular projects may use a public folder for static files that should be copied as-is during build.

Copypublic/
├── favicon.ico
├── logo.png
├── banner.jpg
└── CNAME

Correct Image Path

Copy<img src="logo.png" alt="Logo">

Common GitHub Pages Mistake

Copy<img src="/logo.png" alt="Logo">

10. Configuration Files

Configuration files tell Angular, TypeScript, npm, and Git how the project should work.

angular.json

This is the main Angular workspace configuration file.

Copy{
  "projects": {
    "programmers-picnic-angular-demo": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/programmers-picnic-angular-demo",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "styles": [
              "src/styles.css"
            ],
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ]
          }
        }
      }
    }
  }
}

package.json

Copy{
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "deploy:github": "ng deploy --base-href=/"
  },
  "dependencies": {
    "@angular/core": "...",
    "@angular/common": "...",
    "@angular/router": "..."
  },
  "devDependencies": {
    "@angular/cli": "...",
    "typescript": "..."
  }
}

tsconfig.json

TypeScript configuration controls how TypeScript code is checked and compiled.

Copy{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022"
  }
}

11. Automatically Generated Folders

Some folders are created by tools. You normally do not edit them manually.

Install Packages Again

If node_modules is missing, run:

Copynpm install

Create Build Output

Copyng build

12. Beginner Editing Map

Beginners should know exactly which files to edit for common tasks.

Beginner Rule

13. Intermediate Angular Structure

As an Angular app grows, you should not keep everything inside only one component. You should divide the app into pages, components, services, and models.

Copysrc/app/
├── core/
│   ├── services/
│   └── guards/
│
├── shared/
│   ├── components/
│   └── pipes/
│
├── pages/
│   ├── home/
│   ├── courses/
│   ├── students/
│   └── contact/
│
├── models/
│   └── course.model.ts
│
├── app.config.ts
├── app.routes.ts
└── app.ts

14. Expert-Level Angular Structure

Expert Angular development is about scale, maintainability, testing, performance, and clean architecture.

Feature-Based Structure

Copysrc/app/
├── core/
│   ├── auth/
│   ├── http/
│   ├── layout/
│   └── services/
│
├── shared/
│   ├── ui/
│   ├── pipes/
│   ├── directives/
│   └── utils/
│
├── features/
│   ├── dashboard/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   └── dashboard.routes.ts
│   │
│   ├── courses/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   └── courses.routes.ts
│   │
│   └── students/
│       ├── components/
│       ├── pages/
│       ├── services/
│       └── students.routes.ts
│
├── app.config.ts
├── app.routes.ts
└── app.ts

Expert Rules

Lazy Route Example

Copyexport const routes = [
  {
    path: 'courses',
    loadChildren: () =>
      import('./features/courses/courses.routes')
        .then(m => m.COURSES_ROUTES)
  }
];

15. Common Mistakes

16. Student Assignment

Open your Angular project and identify each of the following files. Write one sentence about each file.

Mini Project

Create this clean structure:

Copysrc/app/
├── pages/
│   ├── home/
│   ├── about/
│   └── courses/
│
├── shared/
│   └── components/
│       ├── header/
│       └── footer/
│
└── core/
    └── services/

Final Summary