Overview
When you create a new Angular project with ng new, the CLI generates a well-organized directory structure. Understanding this structure is essential for working effectively with Angular.
Top-Level Directory
my-first-app/
├── node_modules/ # Installed packages
├── src/ # Application source code
├── angular.json # Angular workspace config
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── tsconfig.app.json # App-specific TS config
├── tsconfig.spec.json # Test-specific TS config
└── README.md # Project documentationThe src/ Directory
This is where your application code lives:
src/
├── app/
│ ├── app.component.ts # Root component class
│ ├── app.component.html # Root component template
│ ├── app.component.css # Root component styles
│ ├── app.component.spec.ts # Root component tests
│ ├── app.config.ts # Application configuration
│ └── app.routes.ts # Routing configuration
├── assets/ # Static files (images, fonts, etc.)
├── index.html # Main HTML page
├── main.ts # Application entry point
└── styles.css # Global stylesKey Files Explained
main.ts — Application Entry Point
This is where Angular bootstraps the application:
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));app.config.ts — Application Configuration
Configures providers for the entire application:
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
],
};app.component.ts — Root Component
The top-level component that serves as the shell of your application:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'my-first-app';
}index.html — Main HTML Page
The single HTML page that hosts the Angular application:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>The <app-root></app-root> tag is where Angular renders the root component.
Application Bootstrap Flow
index.html
└─▶ main.ts (entry point)
└─▶ bootstrapApplication(AppComponent, appConfig)
└─▶ AppComponent renders in <app-root>
└─▶ <router-outlet> loads child routes- The browser loads
index.html - Angular scripts execute
main.ts bootstrapApplication()creates the application with the provided configAppComponentis rendered inside the<app-root>element- The router loads the appropriate child component based on the URL
angular.json — Workspace Configuration
This file controls the build, serve, and test configurations:
{
"projects": {
"my-first-app": {
"architect": {
"build": {
"options": {
"outputPath": "dist/my-first-app",
"index": "src/index.html",
"main": "src/main.ts",
"styles": ["src/styles.css"],
"scripts": []
}
}
}
}
}
}Key settings in angular.json:
| Section | Purpose |
|---|---|
build.options.styles | Global stylesheets |
build.options.assets | Static assets to copy |
build.options.scripts | Global scripts |
build.configurations | Environment-specific settings |
serve.options | Dev server configuration |
Standalone vs NgModule Architecture
Modern Angular (v17+) uses standalone components by default:
// Standalone component (modern)
@Component({
standalone: true,
imports: [CommonModule],
// ...
})
export class MyComponent {}Older Angular projects use NgModules:
// NgModule-based (legacy)
@NgModule({
declarations: [MyComponent],
imports: [CommonModule],
})
export class MyModule {}Tip: New projects should use standalone components. NgModules are still supported but are being phased out.
Next Steps
Now that you understand the project structure, let's dive into Angular's syntax fundamentals — how to write component logic, use decorators, and work with TypeScript in Angular.