Angular Project Structure

What is Project Structure in Angular?

An Angular project keeps application code in src/app, static assets in public or src/assets, and configuration in angular.json and tsconfig.json. The entry point is main.ts, which bootstraps the root component.

Project Structure example

my-app/
├── angular.json          # build and serve configuration
├── package.json
├── tsconfig.json         # TypeScript compiler options
├── public/               # static files served as-is
└── src/
    ├── index.html        # single page with <app-root>
    ├── main.ts           # bootstraps the application
    ├── styles.css        # global styles
    └── app/
        ├── app.component.ts / .html / .css
        ├── app.config.ts     # application-wide providers
        ├── app.routes.ts     # route definitions
        ├── components/
        └── services/

main.ts — where the app starts

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

bootstrapApplication(AppComponent, appConfig);

Key points to remember

• A component is conventionally four files: .ts, .html, .css and .spec.ts.
• app.config.ts holds providers — HTTP, routing, animations — for standalone applications.
• Older projects have app.module.ts instead; both patterns are supported.
• Group by feature once the app grows, with shared code in a core or shared folder.

Common mistakes with Project Structure

• Editing index.html to add UI — it only hosts <app-root>.
• Mixing feature files into one flat folder until nothing can be found.