Chapter 1.3☕ 14 min read

Project Structure Explained

Know your project inside out before you write a single line of code.

01Top Level Folders

When you create an Angular project with ng new, it generates a well-organized folder structure. Let's explore it from top to bottom.

Top-level folders:

src/ — This is the kitchen of your restaurant. All your code lives here. Changes you make go here.
node_modules/ — This is the sabzi mandi (vegetable market). All third-party packages are downloaded here. Never touch this folder manually. It gets deleted and recreated every time you run npm install.
e2e/ — End-to-end test files. Think of it as the food inspector — tests that check your full app works end to end.
public/ — Static files like favicon.ico and images. Like the menu board outside your shop — visible to everyone.

Top-level configuration files:

angular.json — CLI configuration (master key of the restaurant)
package.json — Dependencies and scripts (recipe book)
tsconfig.json — TypeScript compiler options (rulebook)

Hyderabad Tip: Bhai node_modules ko kabhi delete mat kar — 2GB download karoga phir se npm install pe!

02Inside src/ — The Heart of Angular

The src/ folder is the heart of your Angular project. Let's look inside:

app/ — Your main application code. All components, services, and modules go here.
assets/ — Images, fonts, icons, and other static files. Like a storage room for your restaurant.
main.ts — Entry point of the application. This is where Angular boots up. It calls bootstrapApplication(AppComponent, appConfig).
index.html — The single HTML page that Angular uses. Contains <app-root></app-root> — the tag where your entire app lives.
styles.scss — Global styles that apply to the entire application. Like the restaurant's theme color applied everywhere.

Think of main.ts as the main switchboard of TSRTC headquarters. It powers everything on. index.html is the empty bus stand — Angular fills it with content.

03Inside src/app/ — Component World

The src/app/ folder is where you'll spend 90% of your time. Let's understand its structure:

components/ — Your Angular components go here. Think of each component as a different area of Hyderabad — Banjara Hills, Madhapur, Gachibowli — each area has its own buildings (HTML), rules (TypeScript), and style (CSS).
services/ — Shared logic that multiple components can use. This is the central kitchen that supplies food to all restaurant branches.
models/ — TypeScript interfaces and types that define the shape of your data. These are the recipes — they define what ingredients (fields) something needs.
app.config.ts — Application configuration. Like the restaurant's rules and policies — what providers are available, what routing to use.
app.routes.ts — Defines all your application routes. Like TSRTC bus routes — which URL shows which component.
app.component.ts — The root component. Think of this as the main building of your restaurant. All other components live inside this one.

04Understanding angular.json

angular.json is the CLI's configuration file. It tells Angular how to build, serve, and test your application. Think of it as the master key of your restaurant — it controls everything.

Key sections:

projects → name → architect → build: Controls how ng build works — output path, assets, styles, scripts.
projects → name → architect → serve: Controls how ng serve works — dev server options.
projects → name → architect → test: Controls how ng test works — test runner configuration.

Important options:

outputPath — Where built files go (default: dist/). Your packaged app ready for deployment.
index — The HTML template file (usually src/index.html).
browser — The main entry point (usually src/main.ts).
assets — Array of files/folders to include in the build output.
styles — Global CSS/SCSS files to include.

Hyderabad Tip: Ye file restaurant ki master key hai — dhyan se handle karo. Ek galat change aur app nahi banega!

05Understanding tsconfig.json

tsconfig.json is the TypeScript compiler configuration. It tells TypeScript how strict to be and what features to support. Think of it as the rulebook that TypeScript follows.

Key settings:

target: Which JavaScript version to output (ES2022). Higher means modern syntax.
module: Module system for imports/exports (ES2022 or Node).
strict: true: Enables ALL strict type checks. This catches more errors. Always keep this on.
paths: Create shortcuts for imports. For example, @/* can point to src/app/* so you can write import { UserService } from '@/services/user.service' instead of long relative paths like ../../services/user.service.
experimentalDecorators: true: Needed for Angular's @Component, @Injectable decorators.

Angular-specific options (in angularCompilerOptions):

strictTemplates: true: Enables strict checking in HTML templates.
strictInjectionParameters: true: Checks DI parameters at compile time.

Hyderabad Tip: TypeScript ka rulebook hai bhai — yahan se decide hota hai kitna strict compiler behave karega. Strict mode is like Charminar security — strict checking saves production!

Key Takeaways

✅ src/ is where your code lives — everything else is support
✅ node_modules is auto-generated — never edit it directly
✅ main.ts bootstraps the app via bootstrapApplication()
✅ angular.json controls build, serve, and test configuration
✅ tsconfig.json with strict: true catches type errors early

Previous1.2 — Setting Up — Node, npm, ng new, VS Code 📋 All Chapters Next Chapter1.4 — First Component — Hello Hyderabad →