File and Folder Structure of Angular Application

Back to: Angular Tutorials For Beginners and Professionals

In this article, I will discuss the File and Folder Structure of an Angular Application in detail. Please read our previous article, which discusses creating an Angular project with the Angular CLI and Visual Studio.

File and Folder Structure of Angular Application

When you create an Angular application, Angular CLI automatically creates many files and folders. At first, this structure may look confusing, especially for freshers. But every file and folder exists for a clear reason. Angular applications are not small websites. They are real applications that grow over time. So Angular organizes things properly from day one, preventing your project from becoming messy later. For a better understanding, please look at the image:

Let us understand each file and folder.

.vscode Folder – Editor Settings (For Developers Only)

The .vscode folder is only for developers, not for the Angular app itself. This folder stores settings related to Visual Studio Code, such as:

• How code should be formatted.
• How debugging should work.
• Which extensions are recommended?

Important

• This folder does not affect the Angular app
• Code inside this folder is not executed in the browser
• It only improves the developer experience

Simple Analogy: Think of .vscode as chair height and table position in an office. It makes work comfortable but does not change the work itself.

node_modules Folder – Libraries Used by Angular

The node_modules folder contains All External Libraries needed by Angular. Angular depends on:

• Angular Framework Packages
• TypeScript
• RxJS
• Build and Testing Tools

These are automatically downloaded by npm.

Key Points

• This folder can be huge (thousands of files). That’s normal.
• You usually do not edit anything inside it.
• If it gets corrupted, you can delete it and run npm install to recreate it.
• Don’t manually modify packages inside it (changes will be lost later).
• Don’t commit it to Git (normally it’s ignored).

Simple Analogy

Think of node_modules as a toolbox:

• You use the tools
• You don’t build the tools
• You don’t modify the tools

Your actual work is elsewhere.

public Folder – Static Files (No Angular Processing)

The public folder is used for static files that Angular will copy as-is into the build output, without Angular compilation/optimization/binding.

When Is It Useful?

• External integrations
• Files that must remain unchanged
• Rare special cases

Example: Google / Facebook / Payment Gateway Verification

Many external services require you to upload a file to a fixed URL. Example Files:

• google-site-verification.html
• facebook-domain-verification.html
• payment-gateway-verification.txt

Why public?

• The file must not change.
• The file must be served exactly.
• Angular must not optimize or rename it.

Static SEO Files (robots, ads, crawlers)

Search engines and ad platforms require exact filenames. Example:

• robots.txt
• ads.txt
• sitemap.xml

Why public?

• Crawlers expect exact paths
• Angular must not interfere
• These files are read directly by bots

Simple Analogy: Think of the public as a sealed envelope: Angular delivers it but never opens or modifies it.

src Folder – Heart of the Angular Application

The src folder is the heart of the Angular app. This is where:

• Screens are created
• Logic is written
• Styles are applied
• Routing is configured

This Folder Contains

• Components (UI parts)
• Services (logic and APIs)
• Templates and styles
• Configuration files

When someone says, “I’m working on Angular.” They are almost always working inside the src folder.

Simple Analogy: src is the kitchen. Everything that users finally consume is prepared here.

.editorconfig File – Code Formatting Rules

Different developers use different editors and settings. This causes:

• Messy code
• Unnecessary GIT conflicts

The .editorconfig file fixes this.

What It Controls

• Spaces vs tabs
• Line endings
• Whitespace rules

Why It Matters

• Code looks the same everywhere
• Easier teamwork
• Cleaner repository

Simple Analogy: It’s like a dress code: Everyone follows the same style, so things look professional.

.gitignore File – What NOT to Save in Git

Not everything created during development should be shared. The .gitignore file tells Git: Do not track these files.

Common Ignored Items

• Node_modules
• Build output
• Temporary system files

Why It Is Important

• Smaller repository
• Fewer conflicts
• Cleaner version history

Simple Analogy: It’s like deciding what not to pack when moving houses.

angular.json File – Angular CLI Instructions

This file tells Angular CLI how to create, build, manage, and run angular project. Whenever you run:

• ng new
• ng build
• ng serve

Angular CLI reads angular.json. It Defines

• Build Rules
• Output Folders
• Asset Handling
• Environment Settings

Simple Analogy: Think of angular.json as the Manual for Angular CLI.

package.json File – Project Details and Dependencies

The package.json describes the project, lists dependencies, and defines scripts (commands) you can run using npm. It Contains

• Project name
• Angular version
• Dependencies
• NPM scripts

Simple Analogy: This is the ID Card of the Angular project.

package-lock.json File – Exact Dependency Versions

While package.json defines rules, package-lock.json defines exact versions.

Why This Matters

• Same behaviour on all machines
• No “works on my machine” problems
• Stable builds

Simple Analogy: It’s like freezing ingredients in a recipe so the taste never changes.

README.md File – Project Explanation

This is the human-readable documentation. It explains:

• What the project does
• How to run it
• How to set it up

Simple Analogy: It’s the user manual of the project.

tsconfig.json – TypeScript Rules (Global)

Angular uses TypeScript, not plain JavaScript. This file controls:

• How strict TypeScript should be
• What kind of mistakes should it catch early
• What language features are allowed

It does not care whether the code is:

• App code
• Test code

It just defines behaviour.

Simple Analogy: Think of tsconfig.json as the grammar rules of English. The rules apply to everyone.

tsconfig.app.json – TypeScript Rules for the App

This file answers a different question: Which code is the real application that users will use?

So:

• It uses the rules from tsconfig.json
• But applies them only to the app code
• And ignores test code

It is used when:

• The app is run
• The app is built for users

Simple Analogy: Think of tsconfig.app.json as: These grammar rules apply to the final book that will be published.

App Code – What Users See

App code means:

• Screens
• Buttons
• Forms
• Logic that runs in the browser

This is the real Angular application.

Simple Analogy: App code = The movie people watch

Test Code – Only for Checking

Test code means:

• Code that checks if the app works correctly
• Written only for developers
• Never seen by users

Not part of the real application.

Simple Analogy: Test code = Rehearsals before the movie release

.angular Folder – Angular CLI Internal Data

This folder is used internally by Angular CLI for metadata and caching to speed up CLI operations. Developers normally don’t interact with it.

Simple Analogy: It’s like temporary memory for tools – not for humans.

dist Folder – Final Output (Deployment)

This folder is created after running ng build. It contains:

• compiled HTML
• optimized JS
• final CSS

Key Understanding

• This is not source code
• This is what gets deployed
• Never edit manually

Simple Analogy: dist is the packaged product, and src is the factory.

Now that the development environment is fully set up and an Angular project has been created and run successfully, the next step is to understand TypeScript Fundamentals. In the next article, I will explain TypeScript Fundamentals, which is required to write Angular code.