Angular Basics›Core· 25 min read

The Project Structure

Angular creates many files for you — here are the few that actually matter when you start.

What you will learn

Find the key files and folders the CLI creates
Know where your code goes (the src folder)
Understand the main.ts → app entry chain

Do not panic at all the files

A fresh Angular app has a lot of files. You only need a handful to begin. Almost all your work happens inside one folder: src/app.

Think of it like a new car: there are hundreds of parts under the bonnet, but to drive you only touch the steering wheel and pedals. The files below are your steering wheel; the rest is the engine the CLI manages for you.

The files that matter

File / folder	What it is for
`src/`	All your source code lives here
`src/main.ts`	The entry point — starts the app
`src/index.html`	The single HTML page of the SPA
`src/app/`	Your components and code (where you work)
`src/app/app.component.ts`	The root component — the app shell
`angular.json`	Project settings for the CLI
`package.json`	Dependencies and npm scripts

How the app starts

When the browser opens index.html, Angular runs main.ts, which boots the root component and puts it on the page. Here is the heart of main.ts:

main.ts boots the root AppComponent

// src/main.ts — starts the whole app
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

Note: Output: (No visible output — this code runs once at startup.) It tells Angular: “start the app using AppComponent.” Whatever is in AppComponent’s template becomes the first thing the user sees.

Inside index.html there is a custom tag like <app-root></app-root>. That is where the root component renders — Angular swaps your component into that spot.

So the whole startup is a short chain. Follow it once and the project stops feeling mysterious:

The browser loads src/index.html (the one and only page).
index.html pulls in the compiled JavaScript, which runs src/main.ts.
main.ts calls bootstrapApplication(AppComponent) to start the app.
Angular renders AppComponent into the <app-root> tag — and the user sees your app.

Tip: When you are lost, head straight to src/app. That is your workshop; the other files are mostly configuration you rarely touch at first.

Q. Where does almost all of your day-to-day Angular code live?

Answer: Your components and logic live in src/app. Files like angular.json and package.json are configuration you rarely edit when starting.

✍️ Practice

Open src/app and list the files Angular created for the root component.
Find the <app-root> tag inside src/index.html.

🏠 Homework

Write a short note describing what main.ts, index.html and src/app each do.