Project Structure

Every Angular project follows the same layout — once you can name the files in src/, you can navigate any codebase.

4 min read Level 1/5 #angular#structure#project

What you'll learn

Identify roles of main.ts, app.config.ts, app.routes.ts, app.component.ts
Skim angular.json without panic
Understand where assets and global styles live

A fresh ng new project has a handful of files that matter. Knowing what each one does makes the rest of the framework click.

The Tree You Care About

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts        # root component
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   ├── app.config.ts           # providers (router, http, ...)
│   │   └── app.routes.ts           # route table
│   ├── assets/                     # static files (images, fonts)
│   ├── main.ts                     # bootstrap entry
│   ├── styles.css                  # global styles
│   └── index.html
├── angular.json                    # build config
├── package.json
└── tsconfig.json

The Three Files That Run Your App

main.ts — entry point. Bootstraps the root component.

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

bootstrapApplication(AppComponent, appConfig);

app.config.ts — application-level providers. The router, HTTP client, animations, and any DI tokens you set up here are available to every component.

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

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

app.routes.ts — the route table for the whole app.

angular.json and styles.css

angular.json configures builds, dev server options, file replacements for environments, and per-project budgets. You will rarely edit it by hand — ng update and ng add do it for you.

styles.css (or .scss) is global CSS. Use it for resets, design tokens, and rules that don’t belong to one component.

Components — Angular's Building Block →