NgModule decorator and metadata in Angular - Mini Project: Build & Apply

Understanding NgModule Decorator and Metadata

📖 Scenario: You are building a simple Angular application module to organize components and services.

🎯 Goal: Create an Angular module using the @NgModule decorator with proper metadata to declare a component and import the BrowserModule.

📋 What You'll Learn

Create an Angular module class named AppModule.

Use the @NgModule decorator on AppModule.

In the @NgModule metadata, declare a component named AppComponent.

Import BrowserModule in the imports array.

Bootstrap the AppComponent.

💡 Why This Matters

🌍 Real World

Angular modules organize app parts like components and services, making apps scalable and maintainable.

💼 Career

Understanding NgModule is essential for Angular developers to structure applications properly and manage dependencies.

1

Create the Angular module class

Create an Angular class named AppModule with no content yet.

Angular

export class AppModule {
  // Your code here
}

Need a hint?

Start by defining a class named AppModule using export class AppModule {}.

2

Add the @NgModule decorator with empty metadata

Import NgModule from @angular/core and add the @NgModule decorator with an empty object {} above the AppModule class.

Angular

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

@NgModule({
  // Your code here
})
export class AppModule {
}

Need a hint?

Use @NgModule({}) decorator above the class and import NgModule from @angular/core.

3

Add declarations and imports metadata

Import BrowserModule from @angular/platform-browser and AppComponent from ./app.component. Then, inside the @NgModule decorator, add a declarations array with AppComponent and an imports array with BrowserModule.

Angular

import { NgModule } from '@angular/core';
// Import BrowserModule and AppComponent here

@NgModule({
  // Add declarations and imports arrays here
})
export class AppModule {
}

Need a hint?

Remember to import BrowserModule and AppComponent and add them to imports and declarations arrays respectively.

4

Add bootstrap metadata to complete the module

Inside the @NgModule decorator, add a bootstrap array with AppComponent to specify the root component to launch.

Angular

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

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

Need a hint?

Add bootstrap: [AppComponent] inside the @NgModule metadata to specify the starting component.