Root module (AppModule) structure in Angular - Mini Project: Build & Apply

Root module (AppModule) structure

📖 Scenario: You are creating the main module for a simple Angular application. This module will organize the app's components and services.

🎯 Goal: Build the root Angular module called AppModule with a basic setup including imports, declarations, and bootstrap component.

📋 What You'll Learn

Create a root module named AppModule

Import BrowserModule from @angular/platform-browser

Declare a component named AppComponent

Bootstrap the AppComponent

💡 Why This Matters

🌍 Real World

Every Angular app needs a root module to organize components and dependencies. This structure helps Angular know what to load first.

💼 Career

Understanding the root module is essential for Angular developers to set up and maintain applications properly.

1

Create the root module class

Create an Angular module class named AppModule using the @NgModule decorator imported from @angular/core.

Angular

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

// Your code here

Need a hint?

Use @NgModule decorator above the AppModule class.

2

Import BrowserModule

Import BrowserModule from @angular/platform-browser and add it to the imports array inside the @NgModule decorator of AppModule.

Angular

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

@NgModule({
  // Add imports array here
})
export class AppModule {}

Need a hint?

Remember to add BrowserModule inside the imports array.

3

Declare AppComponent

Declare a component named AppComponent in the declarations array inside the @NgModule decorator of AppModule. Also, import AppComponent from './app.component'.

Angular

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

@NgModule({
  imports: [BrowserModule],
  // Add declarations array here
})
export class AppModule {}

Need a hint?

Put AppComponent inside the declarations array.

4

Bootstrap AppComponent

Add AppComponent to the bootstrap array inside the @NgModule decorator of AppModule to set it as the starting component.

Angular

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

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

Need a hint?

Set AppComponent as the bootstrap component to start the app.