Angular Project Structure

When you run ng new, Angular scaffolds a vast collection of configuration files and folders. Unlike React where you can have a single `App.jsx` file, Angular's architecture is enterprise-focused, meaning there is a defined place for virtually everything.

The Root Workspace Directory

The root folder contains workspace configuration files. These dictate how your application compiles, bundles, and tests.

• angular.json: The absolute most critical configuration file. It dictates all build configurations, what CSS files to include globally, environment configurations, and output directories.
• package.json: Standard Node file listing all installed NPM dependencies (like RxJS, TypeScript, and Zone.js) and scripts (ng serve, ng build).
• tsconfig.json: The base TypeScript compiler configuration for the entire workspace.
• node_modules/: Where all the downloaded NPM packages live. Never touch this directly!

The src/ Folder

The src/ folder contains the actual source code of your application. You will spend 99% of your development time inside this directory.

src/
├── app/                  <-- Core application code!
│   ├── app.component.ts  <-- Root Component class
│   ├── app.component.html<-- Root HTML layout
│   ├── app.component.css <-- Root Styling
│   ├── app.routes.ts     <-- Global Routing configuration
│   └── app.config.ts     <-- Global App Providers (Replaced app.module.ts)
├── assets/               <-- Static files (images, fonts)
├── styles.css            <-- Global styles
├── index.html            <-- The single main HTML file served to the browser
└── main.ts               <-- The bootstrapping entry point of the app

Key Files Explained

index.html

Because Angular is a Single Page Application framework, there is truly only one actual HTML file sent to the browser: index.html. Inside this file, you will find a strange tag like <app-root></app-root>. Angular magically injects your entire app inside those tags.

main.ts

This is the absolute entry point of the compiled JavaScript application. It tells Angular which Component to bootstrap into the index.html file. In modern Angular, it calls bootstrapApplication(AppComponent, appConfig).

The app/ Directory

This is where your actual Angular logic lies. Inside, you will see a root component usually named app.component.ts. As you build your app, you will categorize your files into subfolders within app/ (e.g. app/components/, app/services/).

Conclusion

Now that you know your way around the generated workspace, it's time to learn about the fundamental building blocks of Angular. Let's write our very first piece of code in the next section: Components.