Root module (AppModule) structure in Angular

Introduction

The root module is the main starting point of an Angular app. It tells Angular what components and features to load first.

When creating a new Angular app to organize components and services.

When setting up the main app structure to load the first screen.

When adding global features like routing or HTTP services.

When defining which components are visible at the start.

When bootstrapping the app to run in the browser.

Syntax

Angular

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 {}

@NgModule decorator defines the module's metadata.

declarations list components, directives, and pipes in this module.

Examples

Basic root module with one component and browser support.

Angular

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 {}

Root module that also imports HTTP client for web requests.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

Root module with routing setup for navigation.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

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

Sample Program

This is a complete root module with a simple component that shows a welcome message. The app starts by showing the AppComponent content.

Angular

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

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to My Angular App!</h1>`
})
export class AppComponent {}

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

Important Notes

The bootstrap array tells Angular which component to load first.

Always import BrowserModule in the root module for browser apps.

Keep the root module simple; add features by importing other modules.

Summary

The root module organizes the app's main components and features.

Use @NgModule to declare components and import needed modules.

The bootstrap property starts the app with the main component.