Angular has evolved significantly over the years.

For many years, NgModules (AppModule) were the foundation of every Angular application. Starting with Angular 14 and becoming the recommended approach in Angular 17+, Standalone Components simplify application development by eliminating unnecessary modules.

Today, one of the most frequently asked Angular interview questions is:

• What is AppModule?
• What are Standalone Components?
• Which one should we use?
• Why did Angular introduce Standalone Components?

This article answers all of these questions with diagrams, examples, comparisons, and interview questions.

---

Table of Contents

• Introduction
• What is AppModule?
• What are Standalone Components?
• Architecture Comparison
• Bootstrapping Comparison
• Import Management
• Migration Strategy
• Performance Comparison
• Real-World Example
• Top 10 Interview Questions
• Best Practices
• Summary

---

Evolution of Angular

timeline

title Angular Evolution

2016 : Angular 2
2017 : NgModules Become Standard
2022 : Angular 14 Introduces Standalone Components
2023 : Angular 16 Improves Standalone APIs
2024 : Angular 17 Recommends Standalone
2025 : Angular 18+ Component-First Architecture

---

What is AppModule?

AppModule is the root NgModule of an Angular application.

It acts as the central place where developers declare:

• Components
• Pipes
• Directives
• Services
• Imported Modules
• Bootstrap Component

Example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

---

AppModule Architecture

flowchart TD

AppModule

AppModule --> Components

AppModule --> Services

AppModule --> Directives

AppModule --> Pipes

AppModule --> BrowserModule

AppModule --> RouterModule

AppModule --> HttpClientModule

AppModule --> AppComponent

---

What are Standalone Components?

Standalone Components eliminate the need for NgModules.

Each component declares its own dependencies.

Example:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>Welcome to Angular</h2>
  `
})
export class HomeComponent {}

---

Standalone Component Architecture

flowchart TD

AppComponent

AppComponent --> HeaderComponent

AppComponent --> DashboardComponent

AppComponent --> FooterComponent

DashboardComponent --> CommonModule

DashboardComponent --> FormsModule

DashboardComponent --> RouterLink

Each component explicitly imports only the dependencies it needs.

---

Bootstrapping Comparison

AppModule

flowchart LR

Browser

Browser --> main.ts

main.ts --> AppModule

AppModule --> AppComponent

AppComponent --> BrowserDOM

Code:

platformBrowserDynamic()
  .bootstrapModule(AppModule);

---

Standalone Components

flowchart LR

Browser

Browser --> main.ts

main.ts --> bootstrapApplication

bootstrapApplication --> AppComponent

AppComponent --> BrowserDOM

Code:

bootstrapApplication(AppComponent);

---

Project Structure Comparison

AppModule-Based Project

src/

app/

├── app.module.ts
├── app.component.ts
├── app-routing.module.ts
├── dashboard/
├── shared/
└── services/

---

Standalone Project

src/

app/

├── app.component.ts
├── app.routes.ts
├── dashboard/
├── shared/
└── services/

Notice that AppModule is no longer required.

---

Import Management

AppModule

Dependencies are imported into a module.

imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule
]

---

Standalone Components

Dependencies are imported directly into the component.

@Component({

standalone: true,

imports: [

CommonModule,

FormsModule,

RouterLink

]

})

---

Request Flow

sequenceDiagram

actor User

participant Browser

participant AppComponent

participant Dashboard

participant Service

participant API

User->>Browser: Open Application

Browser->>AppComponent: Bootstrap

AppComponent->>Dashboard: Load Feature

Dashboard->>Service: Fetch Data

Service->>API: HTTP Request

API-->>Dashboard: Response

Dashboard-->>Browser: Render UI

The flow is identical; only the configuration differs.

---

Legacy vs Modern Architecture

flowchart LR

Legacy["NgModule"]

Legacy --> Components

Legacy --> Services

Legacy --> Routing

Modern["Standalone"]

Modern --> Components

Modern --> Providers

Modern --> Routes

---

Comparison Table

Feature	AppModule	Standalone Components
Introduced	Angular 2	Angular 14
Recommended Today	No	Yes
Uses NgModule	Yes	No
Bootstrapping	bootstrapModule()	bootstrapApplication()
Boilerplate	More	Less
Learning Curve	Higher	Lower
Tree Shaking	Good	Better
Startup Time	Good	Better
Simplicity	Moderate	High
Scalability	Excellent	Excellent

---

Advantages of AppModule

• Centralized configuration
• Familiar to long-time Angular developers
• Large ecosystem support
• Good for legacy applications

---

Advantages of Standalone Components

• Less boilerplate
• Simpler code
• Easier learning
• Better tree shaking
• Faster startup
• Explicit dependencies
• Better IDE support
• Easier testing
• Better lazy loading
• Recommended by Angular team

---

Migration Strategy

flowchart TD

ExistingApp

ExistingApp --> ConvertComponent

ConvertComponent --> StandaloneTrue

StandaloneTrue --> UpdateRoutes

UpdateRoutes --> BootstrapApplication

BootstrapApplication --> RemoveAppModule

RemoveAppModule --> ModernAngular

Migration can be done gradually; you do not need to convert every component at once.

---

Real-World Example

Suppose you're building an online banking application.

With AppModule, every feature is registered in one or more NgModules.

With Standalone Components, each feature (Accounts, Transfers, Loans, Cards) imports only the Angular features it needs, making the application easier to maintain and improving bundle optimization.

---

Top 10 Interview Questions

1. What is AppModule?

Answer

AppModule is the root NgModule of an Angular application. It organizes components, services, directives, pipes, imported modules, and identifies the bootstrap component.

---

2. What is a Standalone Component?

Answer

A Standalone Component is an Angular component that does not require an NgModule. It declares its own dependencies using the imports property and can be bootstrapped directly.

---

3. Why were Standalone Components introduced?

Answer

Angular introduced Standalone Components to:

• Reduce boilerplate
• Simplify project structure
• Improve tree shaking
• Improve lazy loading
• Make Angular easier to learn
• Eliminate unnecessary NgModules

---

4. How do you create a Standalone Component?

Answer

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  template: `<h2>Home</h2>`
})
export class HomeComponent {}

---

5. How is a Standalone application bootstrapped?

Answer

bootstrapApplication(AppComponent);

Unlike legacy Angular, no AppModule is required.

---

6. Can Standalone Components use Angular modules?

Answer

Yes.

A Standalone Component can import Angular modules such as:

• CommonModule
• FormsModule
• ReactiveFormsModule
• RouterModule

or import other standalone components directly.

---

7. What are the advantages of Standalone Components?

Answer

• Less configuration
• Better readability
• Explicit dependencies
• Improved performance
• Easier testing
• Better lazy loading
• Recommended for modern Angular development

---

8. Can AppModule and Standalone Components coexist?

Answer

Yes.

Angular supports hybrid applications, allowing teams to migrate gradually from NgModules to Standalone Components without rewriting the entire application.

---

9. Should new Angular applications use AppModule?

Answer

No.

For new applications, Angular recommends using Standalone Components with bootstrapApplication() unless there is a specific requirement for a module-based architecture.

---

10. When would you still use AppModule?

Answer

AppModule may still be encountered in:

• Legacy Angular applications
• Older enterprise codebases
• Applications that have not yet migrated to standalone architecture

Developers should understand both approaches because many organizations still maintain existing NgModule-based projects.

---

Common Interview Follow-Up Questions

• What is an NgModule?
• Why was AppModule removed from new Angular projects?
• Can a standalone component import another standalone component?
• What replaces AppRoutingModule?
• How do providers work with standalone applications?
• Can lazy loading be used with standalone components?
• How do you migrate an existing project?
• What is provideRouter()?
• What is provideHttpClient()?
• Is AppModule deprecated?

---

Common Mistakes

• Assuming AppModule is removed from Angular entirely.
• Forgetting to import required dependencies in standalone components.
• Mixing module imports incorrectly during migration.
• Registering providers in the wrong scope.
• Attempting to convert a large application all at once instead of migrating incrementally.

---

Best Practices

• Use Standalone Components for all new Angular projects.
• Migrate legacy applications gradually.
• Import only the dependencies required by each component.
• Use bootstrapApplication() for application startup.
• Use provideRouter() and provideHttpClient() during bootstrapping.
• Keep components small and focused.
• Continue supporting NgModule-based projects when maintaining legacy systems.

---

Summary

AppModule served as the foundation of Angular applications for many years, providing a centralized way to organize components, services, and modules. Modern Angular introduces Standalone Components, which simplify application development by removing unnecessary NgModules and allowing components to manage their own dependencies. While AppModule remains important for maintaining legacy applications, Standalone Components are the recommended approach for building new Angular applications due to their simplicity, improved performance, and reduced boilerplate.

---

Interview Cheat Sheet

Topic	Remember
Legacy Root	AppModule
Modern Root	Standalone Component
Legacy Bootstrap	bootstrapModule()
Modern Bootstrap	bootstrapApplication()
NgModule Required	Legacy Only
Modern Recommendation	Standalone Components
Can Coexist	Yes
Migration	Gradual
Less Boilerplate	Standalone
Recommended for New Apps	Yes

---

Next Article

➡️ 09-Angular-Life-Cycle-Overview-QA.md