Project Structure

A freshly generated Angular project contains more files than you need to touch immediately. This lesson maps each one so you know where to look when something needs to change.

The top-level files

my-first-app/
├── angular.json      ← CLI and build configuration
├── package.json      ← npm dependencies and scripts
├── tsconfig.json     ← TypeScript compiler configuration
└── src/              ← your application source code

angular.json controls the CLI: which files to include in the build, which assets to copy, what configuration to use for ng serve vs ng build. You rarely edit this directly unless you are adding environment file replacements or changing build targets.

tsconfig.json configures the TypeScript compiler. Angular sets strict: true by default, which means all the type-safety rules you learned in TypeScript Foundations are active.

package.json lists your npm dependencies. @angular/core, @angular/common, @angular/router are the framework packages the CLI installs for you.

The `src/` directory

src/
├── index.html        ← the HTML shell Angular injects into
├── main.ts           ← the entry point that bootstraps the app
├── styles.css        ← global styles
└── app/              ← your application code

index.html is the single HTML file your browser loads. It contains:

<body>
  <app-root></app-root>
</body>

That <app-root> element is where Angular mounts your application. Angular replaces it with the rendered output of your root component.

main.ts bootstraps the application:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig).catch(err => console.error(err));

This is the entry point. It tells Angular: “start the application by rendering the App component, using the configuration in appConfig.”

The `src/app/` directory

src/app/
├── app.component.html    ← the root component's template
├── app.component.ts      ← the root component class
├── app.component.css     ← the root component's styles
├── app.config.ts         ← providers: router, HttpClient, etc.
└── app.routes.ts         ← route definitions

app.component.ts is the root component — the top of your component tree. It is a TypeScript class decorated with @Component:

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

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

app.config.ts is where you configure app-wide providers:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

As you add features — HTTP, animations — you add providers here.

app.routes.ts defines your application’s routes. It starts empty:

import { Routes } from '@angular/router';

export const routes: Routes = [];

Where your code lives

Almost everything you write in this course lives in src/app/. As the app grows, you will create subdirectories:

src/app/
├── components/       ← shared UI components
├── pages/            ← page-level components
├── services/         ← business logic and data access
├── models/           ← TypeScript interfaces
├── guards/           ← route guards
└── core/             ← app-level utilities

The CLI does not create these for you — they are conventions. CinemaVault uses all of them.

Exercise

Open the my-first-app project you created in the last lesson and answer these questions by reading the files:

What is the selector for the root component in app.component.ts? Where does that selector appear in index.html?
Open main.ts. Which function bootstraps the application, and what two arguments does it receive?
Open app.config.ts. What provider is configured there? What does that provider enable?
Open tsconfig.json. Is strict set to true?

Recap

angular.json configures the CLI and build system.
src/index.html is the HTML shell — Angular renders into <app-root> inside it.
src/main.ts is the entry point that calls bootstrapApplication.
src/app/app.component.ts is the root component at the top of the component tree.
src/app/app.config.ts is where app-wide providers like the router and HttpClient are registered.
src/app/app.routes.ts is where route definitions live.