What is the Angular Application Structure?

1. What is Angular Application Structure?

The Angular application structure is the organization of folders, files, components, configuration, assets, and dependencies inside an Angular project.

When we create an application using Angular CLI:

ng new my-app

Angular CLI creates a standard project structure similar to:

my-app/
│
├── public/
│
├── src/
│   ├── app/
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.css
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsconfig.app.json
└── tsconfig.spec.json

The exact files can vary depending on the Angular CLI version and options selected when creating the project.

The most important folder for application development is:

src/app/

This is where most of the Angular application's components, services, routes, guards, models, and other application code are placed.

2. Why Do We Need a Proper Application Structure?

Small applications may contain only a few files.

But a real application can contain:

Login
Dashboard
Articles
Categories
Tags
Users
Reports
Settings
Admin

If everything is placed inside one folder:

app/
├── login.ts
├── articles.ts
├── category.ts
├── user.ts
├── auth.service.ts
├── article.service.ts
├── auth.guard.ts
├── auth.interceptor.ts
├── ...

the application quickly becomes difficult to maintain.

A good structure separates functionality logically.

For example:

app/
│
├── core/
├── shared/
├── features/
├── layouts/
├── app.ts
├── app.routes.ts
└── app.config.ts

This makes the application easier to:

• Understand
• Maintain
• Test
• Scale
• Debug
• Develop as a team

3. Purpose of Angular Application Structure

The main purpose is to organize application code based on responsibility and functionality.

A well-structured Angular application answers questions such as:

Where are components?
Where are API services?
Where are models?
Where are guards?
Where are interceptors?
Where are shared components?
Where are application routes?
Where is application configuration?

Instead of searching the entire project, developers can quickly identify where functionality belongs.

4. Basic Angular Project Structure

Let's understand the important files and folders.

my-app/
│
├── public/
│
├── src/
│   ├── app/
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── package-lock.json
└── tsconfig.json

5. src Folder

The src folder contains the application's source code.

src/
│
├── app/
├── index.html
├── main.ts
└── styles.css

Most day-to-day Angular development happens inside:

src/app/

6. main.ts

main.ts is the main entry point of the Angular application.

In a modern standalone Angular application, it commonly contains:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
  .catch(err => console.error(err));

The important part is:

bootstrapApplication(App, appConfig);

This starts the Angular application.

Flow

Browser
   ↓
main.ts
   ↓
bootstrapApplication()
   ↓
Root App Component
   ↓
Angular Application

7. index.html

index.html is the main HTML document loaded by the browser.

A simplified version:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
</head>

<body>

  <app-root></app-root>

</body>

</html>

The important part is:

<app-root></app-root>

Angular loads the root component into this element.

index.html
     ↓
<app-root>
     ↓
App Component

8. app.ts

app.ts commonly represents the root component in modern Angular projects.

Example:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
}

The selector:

selector: 'app-root'

matches:

<app-root></app-root>

inside index.html.

9. app.html

This is the HTML template for the root component.

Example:

<header>
  <h1>My Angular Application</h1>
</header>

<router-outlet></router-outlet>

<footer>
  Copyright 2026
</footer>

The:

<router-outlet></router-outlet>

is where routed components are displayed.

For example:

Header
----------------------

<router-outlet>

   Home
     OR
   Articles
     OR
   Contact

</router-outlet>

----------------------
Footer

10. app.css

This contains styles associated with the root component.

Example:

header {
    padding: 20px;
}

footer {
    padding: 20px;
}

Component-specific CSS normally stays with its component.

11. app.routes.ts

app.routes.ts contains the application's route definitions.

Example:

import { Routes } from '@angular/router';
import { Home } from './features/home/home';
import { Articles } from './features/articles/articles';

export const routes: Routes = [

  {
    path: '',
    component: Home
  },

  {
    path: 'articles',
    component: Articles
  }

];

This maps URLs to components.

URL                     Component

/                       Home
/articles               Articles

12. app.config.ts

Modern standalone Angular applications commonly use app.config.ts for application-level providers and configuration.

Example:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {

  providers: [
    provideRouter(routes)
  ]

};

Other application-wide providers can also be configured here.

For example:

provideRouter(...)
provideHttpClient(...)

So conceptually:

app.config.ts
     |
     +-- Router
     +-- HTTP
     +-- Interceptors
     +-- Other global providers

13. styles.css

styles.css contains global application styles.

For example:

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

The difference is:

app.css
   ↓
Root component styles

styles.css
   ↓
Global application styles

Individual components can also have their own CSS files.

14. public Folder

The public folder is commonly used for static files that should be copied to the build output.

For example:

public/
│
├── images/
│   └── logo.png
│
├── icons/
│   └── favicon.png
│
└── documents/
    └── brochure.pdf

These are files that don't contain Angular application logic.

15. angular.json

angular.json contains Angular workspace and build configuration.

It can contain configuration related to:

• Build
• Serve
• Test
• Assets
• Styles
• Scripts
• Different build configurations

You normally don't modify it frequently during basic Angular development, but it is an important project configuration file.

16. package.json

package.json contains the project's npm dependencies and scripts.

A simplified example:

{
  "scripts": {
    "start": "ng serve",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/core": "...",
    "@angular/router": "..."
  }
}

It tells npm which packages the project depends on.

For example:

Angular Core
Angular Router
RxJS
Other npm libraries

17. package-lock.json

package-lock.json records the exact dependency versions installed for the project.

This helps different developers and build environments install a consistent dependency tree.

Normally, you should not manually edit this file.

18. node_modules

After running:

npm install

npm downloads project dependencies into:

node_modules/

For example:

node_modules/
├── @angular/
├── rxjs/
├── typescript/
└── ...

You normally:

• Don't manually modify it.
• Don't write application code inside it.
• Don't commit it to Git.

Dependencies can be restored using:

npm install

or, commonly in automated environments when a lock file is present:

npm ci

19. TypeScript Configuration Files

Angular projects contain TypeScript configuration files.

Common examples:

tsconfig.json
tsconfig.app.json
tsconfig.spec.json

tsconfig.json

Contains base TypeScript compiler configuration.

tsconfig.app.json

Contains TypeScript configuration specifically for application code.

tsconfig.spec.json

Contains configuration related to test code when the project uses that test setup.

20. Recommended Real-World Application Structure

For a larger Angular application, keeping every component directly inside app is not ideal.

A more scalable structure is:

src/
└── app/
    │
    ├── core/
    │   ├── guards/
    │   ├── interceptors/
    │   └── services/
    │
    ├── shared/
    │   ├── components/
    │   ├── directives/
    │   └── pipes/
    │
    ├── layouts/
    │   ├── public-layout/
    │   └── admin-layout/
    │
    ├── features/
    │   ├── home/
    │   ├── articles/
    │   ├── contact/
    │   ├── auth/
    │   └── admin/
    │
    ├── app.ts
    ├── app.html
    ├── app.css
    ├── app.routes.ts
    └── app.config.ts

This is much easier to manage in a large application.

21. core Folder

The core folder commonly contains functionality that is used application-wide.

Example:

core/
│
├── guards/
│   └── auth.guard.ts
│
├── interceptors/
│   └── auth.interceptor.ts
│
└── services/
    └── auth.service.ts

Typical examples include:

• Authentication service
• Authorization guards
• HTTP interceptors
• Application-wide services

22. shared Folder

The shared folder contains reusable UI and utilities that can be used by multiple features.

Example:

shared/
│
├── components/
│   ├── loading-spinner/
│   └── confirmation-dialog/
│
├── pipes/
│   └── reading-time.pipe.ts
│
└── directives/
    └── highlight.directive.ts

Think:

Shared = reusable across multiple features.

23. features Folder

The features folder contains actual business/application features.

For example:

features/
│
├── home/
├── articles/
├── categories/
├── contact/
├── auth/
└── admin/

An Articles feature could be organized as:

articles/
│
├── article-list/
│   ├── article-list.ts
│   ├── article-list.html
│   └── article-list.css
│
├── article-details/
│   ├── article-details.ts
│   ├── article-details.html
│   └── article-details.css
│
├── article.service.ts
└── article.model.ts

This is called feature-based organization.

It is generally easier to scale than organizing the entire application purely by technical type.

24. layouts Folder

Layouts define the overall page structure.

For example:

layouts/
│
├── public-layout/
│
└── admin-layout/

The public site might have:

Header
Navigation
Content
Footer

while the admin area might have:

Admin Header
Sidebar
Admin Content

So:

Public Layout
    |
    +-- Home
    +-- Articles
    +-- Contact


Admin Layout
    |
    +-- Dashboard
    +-- Categories
    +-- Articles
    +-- Users

25. Modern Standalone vs Older NgModule Structure

This is important for interviews and existing projects.

Older Angular

Older Angular applications commonly contained:

app/
│
├── app.component.ts
├── app.component.html
├── app.component.css
├── app.module.ts
└── app-routing.module.ts

The important file was:

app.module.ts

Components were declared inside modules.

Example:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule
  ]
})
export class AppModule {
}

Modern Standalone Angular

Modern Angular applications can instead use:

app/
│
├── app.ts
├── app.html
├── app.css
├── app.config.ts
└── app.routes.ts

There is no requirement for:

app.module.ts

Application startup uses:

bootstrapApplication(App, appConfig);

Difference

26. Example Structure for Angular + ASP.NET Core

For an Angular frontend consuming an ASP.NET Core Web API, a practical structure could be:

src/app/
│
├── core/
│   ├── guards/
│   │   └── auth.guard.ts
│   │
│   ├── interceptors/
│   │   └── auth.interceptor.ts
│   │
│   └── services/
│       └── auth.service.ts
│
├── shared/
│   ├── components/
│   ├── directives/
│   └── pipes/
│
├── layouts/
│   ├── public-layout/
│   └── admin-layout/
│
├── features/
│   ├── home/
│   ├── articles/
│   ├── contact/
│   └── admin/
│
├── app.ts
├── app.html
├── app.css
├── app.routes.ts
└── app.config.ts

The communication would then be:

Feature Component
       ↓
Service
       ↓
HttpClient
       ↓
ASP.NET Core Web API
       ↓
SQL Server

27. Advantages of a Good Angular Structure

Maintainability

Developers can quickly find relevant code.

Scalability

New features can be added without making the root folder unmanageable.

Reusability

Common components and utilities can be placed in:

shared/

Separation of Concerns

Different responsibilities are separated:

core      → Application-wide infrastructure

shared    → Reusable functionality

features  → Business features

layouts   → Page structures

Team Development

Different developers can work on different features with fewer conflicts.

28. Disadvantages / Considerations

The Angular structure itself has few disadvantages, but over-structuring can cause problems.

For a tiny application, creating:

core/
shared/
features/
layouts/
models/
services/
guards/
interceptors/

before they are needed can make the project unnecessarily complicated.

The structure should grow according to the application.

Also, there is no single mandatory folder structure that every Angular project must follow. Angular provides conventions and tooling, but teams still make architectural decisions based on application size and requirements.

29. Key Points

For interviews, remember:

• src/ contains application source code.
• src/app/ contains most Angular application logic.
• main.ts is the application entry point.
• index.html contains the Angular root host element.
• app.ts commonly represents the root component in modern Angular.
• app.html is the root component template.
• app.config.ts contains application-level providers/configuration.
• app.routes.ts contains routing configuration.
• styles.css contains global styles.
• public/ contains static public files.
• angular.json contains Angular workspace/build configuration.
• package.json contains npm dependencies and scripts.
• node_modules contains installed npm packages.
• Modern Angular favors standalone architecture.
• Older Angular applications commonly use NgModules.
• Large applications are commonly better organized by features rather than putting everything directly under app.

A useful structure to remember is:

app/
├── core/
├── shared/
├── layouts/
├── features/
├── app.ts
├── app.routes.ts
└── app.config.ts

30. Interview Questions and Answers

Q1. What is Angular application structure?

Answer:

Angular application structure is the organization of Angular source files, components, services, routes, configuration, assets, and dependencies within an Angular project. Angular CLI creates a standard initial structure that can be extended as the application grows.

Q2. What is the src/app folder?

Answer:

src/app is the main folder where Angular application code is normally maintained, including components, services, routes, guards, interceptors, and feature-related code.

Q3. What is main.ts?

Answer:

main.ts is the main entry point of an Angular application.

In modern standalone Angular:

bootstrapApplication(App, appConfig);

is commonly used to start the application.

Q4. What is index.html?

Answer:

index.html is the main HTML document loaded by the browser.

It contains the root Angular element, such as:

<app-root></app-root>

Angular renders the root component into this element.

Q5. What is app.config.ts?

Answer:

app.config.ts commonly contains application-level provider configuration in standalone Angular applications.

For example:

provideRouter(routes)

and:

provideHttpClient()

can be configured there.

Q6. What is app.routes.ts?

Answer:

app.routes.ts contains Angular route definitions.

For example:

{ path: 'articles', component: Articles }

maps /articles to the Articles component.

Q7. What is the difference between app.css and styles.css?

Answer:

app.css contains styles associated with the root component, while styles.css contains global styles for the application.

Q8. What is package.json?

Answer:

package.json defines the npm dependencies and scripts used by the Angular project.

Q9. What is angular.json?

Answer:

angular.json contains Angular workspace configuration for operations such as building, serving, testing, assets, styles, and scripts.

Q10. What is the difference between core and shared?

Answer:

core normally contains application-wide infrastructure such as authentication services, guards, and interceptors.

shared contains reusable components, pipes, directives, and other functionality that can be used by multiple features.

core
  ↓
Application-wide functionality

shared
  ↓
Reusable functionality

Q11. What is feature-based folder structure?

Answer:

Feature-based structure organizes files according to business functionality.

For example:

features/
├── articles/
├── categories/
├── users/
└── admin/

Each feature keeps its related components, services, models, and routes close together.

Q12. What is the major structural difference between older and modern Angular?

Answer:

Older Angular applications commonly organize and bootstrap functionality through NgModule, such as AppModule.

Modern Angular favors standalone components and APIs, with files such as:

app.config.ts
app.routes.ts

and application startup through:

bootstrapApplication()

Interview Summary

An Angular application is organized into source files, components, routes, configuration, static assets, and npm dependencies. main.ts is the application entry point, index.html hosts the root Angular component, src/app contains the main application code, app.routes.ts defines routes, and app.config.ts contains application-level providers in modern standalone Angular. For larger applications, a feature-based structure using folders such as core, shared, layouts, and features provides better maintainability and scalability.