What is the AppModule in Angular ?

In Angular, AppModule plays an important role as the entry point to an Angular application. In this article, we'll learn about what AppModule is, its structure, and its significance in Angular applications. We'll also look at some examples to have a clear understanding.

What is AppModule?

In Angular, the AppModule is a core module that serves as the root module of an Angular application. The AppModule defines the structure, bootstrapping process, and initialization logic necessary for Angular to run the application.

An AppModule can also be considered the heart of every Angular application. It is typically found in the app.module.ts file and serves as the entry point to the application. Within the AppModule we declare and configure the different parts of our application like components, directives, pipes, services, and other modules.

Syntax:

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

Structure of AppModule:

The AppModule class is decorated by a '@NgModule' decorator. This decorator identifies the AppModule class as the Angular module class and provides the meta data required to compile and run the application.

Let's have a look at the various properties of @NgModule decorator:

• Imports: The Imports array contains all other modules required for the application. These could be Angular modules like BrowserModule, FormsModule or custom feature modules.
• Declarations: Declarations array contains components, directives, and pipes specific to the AppModule. By declaring them within the AppModule Declarations section, we make them available for use throughout the application.
• Providers: Providers array contains the services or dependencies required by the application. These services can be injected into the components, directives or other services.
• Bootstrap: The bootstrap array specifies the root component that angular should bootstrap when the application starts. This typically contains the root component AppComponent.

Importance of AppModule

AppModule plays a important role in Angular applications for several reasons:

• It provides a structured way to organize and configure components, services and other parts of the application.
• AppModules provides modularity by allowing the import of different modules in the application.
• It serves as the entry point for Angular application, defining the application's initial configuration and setup.
• AppModule provides the dependency injection system allowing seamless sharing of dependencies across the application.

Examples of AppModule in Angular

Example 1: In the example, we'll create a simple Angular application with a single component declared in the AppModule.

Step 1: Create a new Angular project using the Angular CLI

ng new my-app

Step 2: Navigate to the project directory.

cd my-app

Folder Structure:

Project Structure

Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Step 3: Add the following codes in the respective files.

JavaScript

//app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: '<h1>Welcome to GeeksForGeeks!</h1>',
    styleUrls: ['./app.component.css'],
})
export class AppComponent { }

JavaScript

//app.module.ts

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

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

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

Step 4: Save the changes and run the application using the Angular CLI.

ng serve

Output:

Output for example 1

Example 2: In this example, we'll create a simple custom module and import it into the imports section of AppModule.

Step 1: create a new Angular project using the Angular CLI.

ng new custom-module-example

Step 2: Navigate to the project directory.

cd custom-module-example

Step 3: Create a custom module using the below command.

ng generate module custom-module

Step 4: Create a simple component within the newly created module.

ng generate component custom-module/custom-component

Step 5: Open the custom-module.module.ts file located in src/app/custom-module directory and export our custom component.

HTML

<!--app.component.html-->

<app-custom-component></app-custom-component>

JavaScript

//custom-module.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomComponentComponent } from './custom-component/custom-component.component';

@NgModule({
    declarations: [],
    imports: [CommonModule, CustomComponentComponent],
    exports: [CustomComponentComponent],
})
export class CustomModuleModule { }

JavaScript

//custom-component.component.ts

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

@Component({
    selector: 'app-custom-component',
    standalone: true,
    imports: [],
    template: '<h1>This is my custom component!</h1>',
    styleUrl: './custom-component.component.css'
})
export class CustomComponentComponent { }

JavaScript

//app.module.ts

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

import { AppComponent } from './app.component';
import { CustomModuleModule } from './custom-module/custom-module.module';

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

Step 6: Save the changes and run the application.

ng serve

Output:

Output for example 2