Angular 20 Project Folder Structure Explained
Angular 20 introduces a cleaner and more modern project structure by default, especially with the adoption of
standalone components. In this blog, we’ll walk through each important file and folder in a typical Angular 20 project and understand their purpose and relationship with each other.🗂 Project Structure Overview
first-project/
├── .angular/ → Angular CLI cache
├── .vscode/ → VS Code settings
├── node_modules/ → Installed dependencies
├── public/ → Static assets
├── src/ → Application source code
│ ├── app/
│ │ ├── new/ → Feature folder (lazy load or modular)
│ │ ├── app.config.ts → Configuration for standalone bootstrap
│ │ ├── app.html → App component HTML
│ │ ├── app.css → App component styles
│ │ ├── app.routes.ts → Angular routing configuration
│ │ ├── app.spec.ts → Unit test for the App component
│ │ ├── app.ts → App root component (standalone)
│ ├── index.html → Entry HTML page
│ ├── main.ts → Bootstraps Angular app
│ ├── styles.css → Global styles
├── angular.json → Angular workspace configuration
├── package.json → Project metadata and dependencies
├── tsconfig.json → TypeScript compiler configuration
├── README.md → Project documentation
📁 Important Folders & Files
1. src/
This is the heart of the application. All your Angular code resides here.
- app/: Contains core and feature files of your application.
- index.html: Base HTML page; Angular injects the app here.
- main.ts: Entry point that bootstraps the app using
app.config.ts. - styles.css: Global stylesheet applied across the app.
2. app.ts – Root Standalone Component
This file defines the root component using
standalone: true. It replaces the traditional app.module.ts.
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected title = 'first-project';
}
3. app.config.ts – Application Configuration
Instead of bootstrapping via a module, Angular 20 uses this config file to define imports and routes.
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig = {
providers: [provideRouter(routes)],
};
4. main.ts – Application Bootstrapper
This is the entry point for the Angular application. It uses
bootstrapApplication() instead of platformBrowserDynamic().bootstrapModule().
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app';
import { appConfig } from './app.config';
bootstrapApplication(App, appConfig)
.catch(err => console.error(err));
5. app.routes.ts – Routing Configuration
This file defines the application’s route structure using the new
loadComponent() API for lazy-loaded standalone components.
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'new',
loadComponent: () => import('./new/new.component').then(m => m.NewComponent)
}
];
🧩 Feature Folders (e.g. new/)
Angular 20 promotes modular architecture using feature folders. Each feature can have its own standalone component and routes.
- Encapsulate related logic
- Lazy-load components when needed
- Improve maintainability and scaling
📌 Summary of Angular 20 Structure
- No AppModule: Bootstraps with standalone
Appcomponent. - Modular Features: Easily lazy-loaded via
loadComponent(). - Fewer Files: Less boilerplate compared to older versions.
- Faster Setup: Simplified CLI usage and default settings.
✅ Best Practices
- Organize features in their own folders.
- Use standalone components to reduce dependencies.
- Keep configuration files (routes, bootstrap) outside of UI logic.
- Use meaningful names and split code logically.
🧠 Conclusion
Angular 20 simplifies the developer experience by reducing boilerplate and embracing component-first architecture. Understanding this folder structure helps you build apps that are scalable, modular, and easier to maintain.