AI Reading
Quick summary of this article
Angular 20 simplifies project setup by removing the traditional AppModule and embracing standalone components, resulting in fewer files and less boilerplate. The new structure uses a configuration file for bootstrapping and routing, making applications easier to build and maintain.
- The
src/appfolder contains the root standalone component (app.ts) and its configuration (app.config.ts), which replaces the older module-based approach. - Applications are bootstrapped using
bootstrapApplication()inmain.ts, instead of the olderplatformBrowserDynamic().bootstrapModule()method. - Routing is defined in
app.routes.tsand supports lazy loading of feature components via theloadComponent()API, improving performance. - Feature folders (like
new/) encapsulate related logic and can be lazy-loaded, promoting modularity and easier scaling. - Key project files include
angular.jsonfor workspace configuration,package.jsonfor dependencies, andtsconfig.jsonfor TypeScript settings.
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.