Episode 4 of 27

Core Files Overview

Understand every core file in an Angular project — how the app bootstraps, modules, and configuration files.

Core Files Overview

Let's walk through the key files that the Angular CLI generates and understand what each one does.

index.html — The Single Page

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <app-root></app-root>  <!-- Angular injects the app here -->
</body>
</html>

This is the only HTML page. The <app-root> tag is where Angular renders the root component. The <base href="/"> is essential for routing.

main.ts — The Entry Point

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

This file bootstraps the Angular application by loading the root module (AppModule).

app.module.ts — The Root Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent      // Components registered here
    ],
    imports: [
        BrowserModule,    // Required for browser apps
        AppRoutingModule  // Routing module
    ],
    providers: [],        // Services registered here
    bootstrap: [AppComponent]  // Root component
})
export class AppModule { }

@NgModule Breakdown

Property	Purpose
`declarations`	Components, directives, and pipes that belong to this module
`imports`	Other modules this module depends on
`providers`	Services available for dependency injection
`bootstrap`	The root component that Angular inserts into `index.html`

app.component.ts — The Root Component

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

@Component({
    selector: 'app-root',            // The HTML tag name
    templateUrl: './app.component.html',  // The template
    styleUrls: ['./app.component.css']    // The styles
})
export class AppComponent {
    title = 'my-first-app';
}

The @Component decorator tells Angular this class is a component and provides metadata about its selector, template, and styles.

angular.json — CLI Configuration

Controls build settings, asset paths, styles, scripts, and more:

{
    "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": []
                    }
                }
            }
        }
    }
}

tsconfig.json — TypeScript Configuration

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ES2022",
        "strict": true,
        "experimentalDecorators": true  // Required for Angular decorators
    }
}

The Bootstrap Flow

index.html
  └── main.ts (entry point)
        └── AppModule (root module)
              └── AppComponent (root component)
                    └── app.component.html (rendered in <app-root>)

Key Takeaways

index.html is the single page — Angular injects everything into <app-root>
main.ts bootstraps the app by loading the root module
app.module.ts declares components, imports modules, and provides services
app.component.ts is the root component with its selector, template, and styles
Every component must be declared in a module's declarations array
angular.json configures the CLI build process