Understanding Project Structure

Tour the folders and files an Angular CLI project generates, and what each one is responsible for.

Top-Level Layout

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.config.ts
│   ├── main.ts
│   └── index.html
├── angular.json
├── package.json
└── tsconfig.json

Inside src/app

File	Purpose
app.component.ts	The root component's class — logic, decorator metadata, and imports.
app.component.html	The root component's template — its rendered markup.
app.component.css	Styles scoped to just this component.
app.config.ts	App-wide configuration — providers like the router, HttpClient, etc.

// src/main.ts — the actual entry point
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

Anatomy of a Component

Every Angular component splits across (typically) three files by default — a TypeScript class, an HTML template, and a CSS stylesheet — connected via the @Component decorator.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'my-app';
}

The @Component Decorator

A decorator is a TypeScript feature that attaches metadata to a class. @Component tells Angular this class is a component, and describes how it selects into markup (selector), what template it uses, and what styles apply to it.

Configuration Files

angular.json — project-wide build configuration: assets, styles, build targets.
package.json — dependencies and npm scripts.
tsconfig.json — TypeScript compiler options shared across the project.

Common Beginner Mistakes

Editing generated files inside dist/ or .angular/

Both are build output/cache folders, regenerated automatically — never edit them directly.

Forgetting to update all three files (ts/html/css) when refactoring a component

Angular expects these files to stay in sync — a common early mistake is renaming a property in the class but forgetting to update the template that references it.

FAQs

Can a component's template and styles live inline instead of separate files?

Yes — the template and styles properties (instead of templateUrl/styleUrl) let you write markup and CSS directly inside the @Component decorator, useful for very small components.

What is the app-root selector used for?

It's the custom HTML tag (<app-root></app-root>) placed in index.html where Angular bootstraps and renders the entire application.

Summary

Every Angular component combines a TypeScript class, an HTML template, and CSS styles, tied together by the @Component decorator. Next, you'll build your first components from scratch.

Next Lesson →