Backend interview prep

Start

Angular Project Structure

Learn the Angular project structure in detail, including every important file and folder, architecture diagrams, project organization, best practices, enterprise folder structure, and top interview questions.

Understanding the Angular project structure is essential for every Angular developer. One of the most common interview questions is "Can you explain the Angular project structure?"

Angular CLI generates a standardized project layout that helps developers build scalable, maintainable, and enterprise-grade applications.

In this article, we'll explore every important file and folder created by Angular CLI, understand how they work together, and answer the top interview questions.

Table of Contents

  • Introduction
  • Angular Project Structure
  • Root-Level Files
  • src Folder
  • app Folder
  • Configuration Files
  • Build Process
  • Enterprise Folder Structure
  • Interview Questions
  • Best Practices
  • Summary

What is Angular Project Structure?

Angular Project Structure is the standardized organization of folders and files created by Angular CLI. It provides a consistent layout that separates source code, assets, configurations, tests, and build artifacts.

Benefits include:

  • Better maintainability
  • Easier collaboration
  • Scalability
  • Reusability
  • Standardized development

Angular Project Structure Overview

flowchart TD

Project["Angular Project"]

Project --> Src["src"]
Project --> NodeModules["node_modules"]
Project --> Public["public"]
Project --> AngularJson["angular.json"]
Project --> PackageJson["package.json"]
Project --> Tsconfig["tsconfig.json"]
Project --> Gitignore[".gitignore"]
Project --> Readme["README.md"]
Project --> PackageLock["package-lock.json"]

Complete Folder Structure

employee-management/

├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── styles.css
│   ├── main.ts
│   └── index.html
│
├── public/
│
├── node_modules/
│
├── angular.json
├── package.json
├── package-lock.json
├── tsconfig.json
├── .editorconfig
├── .gitignore
└── README.md

High-Level Project Architecture

flowchart LR

Developer

Developer --> SourceCode["src"]

SourceCode --> Build["Angular CLI Build"]

Build --> Dist["dist"]

Dist --> Browser

Browser --> User

Root-Level Files

angular.json

The main Angular workspace configuration file.

It defines:

  • Build options
  • Assets
  • Styles
  • Scripts
  • Environment configurations
  • Project settings

Example:

{
  "projects": {
    "employee-management": {}
  }
}

package.json

Contains project metadata and dependencies.

Example:

{
  "dependencies": {
    "@angular/core": "^20.0.0"
  }
}

Responsibilities:

  • Project information
  • Installed packages
  • Scripts
  • Angular versions

package-lock.json

Automatically generated by npm.

Purpose:

  • Locks dependency versions
  • Ensures consistent installations
  • Improves build reproducibility

tsconfig.json

TypeScript configuration.

Defines:

  • Compiler options
  • Target version
  • Module resolution
  • Strict mode
  • Path aliases

.gitignore

Specifies files Git should ignore.

Typical entries:

node_modules/
dist/
.angular/

README.md

Contains project documentation such as:

  • Setup instructions
  • Build steps
  • Run commands
  • Deployment notes

The src Folder

The src directory contains the application's source code.

flowchart TD

Src["src"]

Src --> App["app"]
Src --> Assets["assets"]
Src --> Environments["environments"]
Src --> Main["main.ts"]
Src --> Styles["styles.css"]
Src --> Index["index.html"]

app Folder

The app folder contains the application code.

flowchart TD

App["app"]

App --> Components["components"]
App --> Services["services"]
App --> Models["models"]
App --> Guards["guards"]
App --> Interceptors["interceptors"]
App --> Pipes["pipes"]
App --> Directives["directives"]
App --> Shared["shared"]
App --> Routes["app.routes.ts"]
App --> Root["app.component.ts"]

main.ts

The entry point of the Angular application.

Modern Angular bootstraps standalone applications.

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

bootstrapApplication(AppComponent);

Responsibilities:

  • Starts Angular
  • Loads AppComponent
  • Initializes Dependency Injection

index.html

The only HTML page loaded by the browser.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Employee Management</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Angular replaces <app-root> with the root component during runtime.

styles.css

Global stylesheet.

Example:

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

Used for:

  • Global themes
  • Typography
  • Utility classes
  • Layout styles

assets Folder

Stores static resources.

Examples:

assets/

logo.png
images/
icons/
fonts/
videos/
documents/

These files are copied directly into the production build.

environments Folder

Stores environment-specific configuration.

Typical files:

environment.ts
environment.development.ts

Example:

export const environment = {
    production: false,
    apiUrl: "https://dev-api.company.com"
};

Request Flow Inside Project

sequenceDiagram

actor User

participant Browser

participant AppComponent

participant FeatureComponent

participant Service

participant API

User->>Browser: Open Application

Browser->>AppComponent: Bootstrap

AppComponent->>FeatureComponent: Load Feature

FeatureComponent->>Service: Request Data

Service->>API: HTTP Request

API-->>Service: Response

Service-->>FeatureComponent: Data

FeatureComponent-->>Browser: Render UI

Enterprise Folder Structure

Large enterprise applications usually organize code by features.

src/

app/

├── core/
│   ├── authentication/
│   ├── interceptors/
│   ├── guards/
│   └── services/
│
├── shared/
│   ├── components/
│   ├── directives/
│   ├── pipes/
│   └── models/
│
├── features/
│   ├── dashboard/
│   ├── users/
│   ├── accounts/
│   ├── payments/
│   └── reports/
│
├── layouts/
│
├── app.component.ts
└── app.routes.ts

Benefits:

  • Better scalability
  • Feature isolation
  • Easier maintenance
  • Improved code ownership

Build Process

flowchart LR

SourceCode

SourceCode --> TypeScript

TypeScript --> AngularCompiler

AngularCompiler --> Bundler

Bundler --> Optimizer

Optimizer --> DistFolder["dist"]

DistFolder --> Browser

Advantages of Standard Project Structure

Feature Benefit
Organized folders Easier navigation
Angular CLI support Standard layout
Modular code Better maintainability
Feature separation Scalable architecture
Environment support Multiple deployments
Assets folder Static resource management
Configuration files Centralized settings

Top 10 Angular Project Structure Interview Questions

1. What is the Angular project structure?

Answer

It is the standard folder and file organization generated by Angular CLI that separates source code, configuration, assets, and dependencies into a maintainable layout.

2. What is the purpose of the src folder?

Answer

The src folder contains all application source code, including components, services, assets, styles, configuration, and the application entry point.

3. What is the purpose of main.ts?

Answer

main.ts is the entry point of the Angular application. It bootstraps the root component and starts the application.

4. What is angular.json?

Answer

angular.json is the workspace configuration file. It controls build options, assets, styles, scripts, environments, and project settings.

5. What is the purpose of package.json?

Answer

It stores project metadata, dependencies, development dependencies, and npm scripts used to build, test, and run the application.

6. What is the purpose of the assets folder?

Answer

The assets folder stores static files such as images, fonts, icons, videos, and documents that are copied directly into the build output.

7. What is the role of index.html?

Answer

index.html is the single HTML page loaded by the browser. Angular renders the root component inside the <app-root> element.

8. Why do we have an environments folder?

Answer

It stores environment-specific settings such as API URLs, feature flags, and production/development configurations.

9. Why shouldn't node_modules be committed to Git?

Answer

Because it contains downloaded dependencies that can be recreated using npm install, making the repository unnecessarily large.

Answer

A feature-based structure with folders like:

  • core
  • shared
  • features
  • layouts
  • services
  • guards
  • interceptors

This improves scalability, maintainability, and team collaboration.

Common Interview Follow-Up Questions

  • What is the difference between public and assets?
  • What is the purpose of package-lock.json?
  • What is the dist folder?
  • What is the Angular workspace?
  • What files are generated by Angular CLI?
  • What is tsconfig.json?
  • What is the purpose of app.routes.ts?
  • What belongs in the core module?
  • What belongs in the shared folder?
  • How do enterprise applications organize Angular features?

Common Mistakes

  • Placing all components in one folder.
  • Mixing business logic with UI components.
  • Storing API URLs directly in components.
  • Committing node_modules to source control.
  • Creating duplicate shared components.
  • Ignoring feature-based organization as the project grows.

Best Practices

  • Use a feature-based folder structure.
  • Keep reusable code inside shared.
  • Place singleton services in core.
  • Store static resources in assets.
  • Use environment files for configuration.
  • Keep components small and focused.
  • Avoid deeply nested folders.
  • Follow Angular CLI conventions.

Summary

Angular's project structure provides a standardized and scalable way to organize applications. By understanding the purpose of each file and folder—from main.ts and angular.json to assets, environments, and feature folders—you can build maintainable applications and confidently answer common Angular interview questions. Enterprise projects typically extend the default structure with core, shared, and feature-based organization to support larger development teams.

Interview Cheat Sheet

Topic Remember
Entry Point main.ts
Root HTML index.html
Root Component AppComponent
Source Code src/
Static Files assets/
Configuration angular.json
Dependencies package.json
TypeScript Config tsconfig.json
Environment Settings environments/
Recommended Organization Feature-Based Structure

Next Article

➡️ 05-TypeScript-For-Angular-QA.md