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
}

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

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

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

Hint

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

Practice

1. What is the main purpose of the NgModule decorator in Angular?

easy

A. To group related components, directives, and services into a cohesive block

B. To define the HTML template of a component

C. To handle HTTP requests in Angular

D. To style components using CSS

Solution

1. Step 1: Understand the role of NgModule

   The NgModule decorator organizes related parts of an Angular app like components and services.

2. Step 2: Differentiate from other decorators

   Other decorators like Component define templates, but NgModule groups these parts together.

3. Final Answer:

   To group related components, directives, and services into a cohesive block -> Option A

4. Quick Check:

   NgModule groups app parts = A [OK]

Hint: NgModule groups app parts, not templates or styles [OK]

Common Mistakes:

• Confusing NgModule with Component decorator
• Thinking NgModule handles styling or HTTP
• Mixing NgModule with service injection only

2. Which of the following is the correct way to declare an Angular module using the NgModule decorator?

easy

A. @NgModule({ declarations: MyComponent, imports: BrowserModule }) export class MyModule {}

B. @NgModule({ components: [MyComponent], imports: [BrowserModule] }) export class MyModule {}

C. @NgModule({ declarations: [MyComponent], imports: [BrowserModule] }) export class MyModule {}

D. @NgModule({ declarations: [MyComponent], import: [BrowserModule] }) export class MyModule {}

Solution

1. Step 1: Check correct metadata keys

   The correct keys are declarations and imports, both expecting arrays.

2. Step 2: Validate syntax and spelling

   @NgModule({ declarations: [MyComponent], imports: [BrowserModule] }) export class MyModule {} uses correct keys and array syntax. Others have wrong keys like components or missing arrays.

3. Final Answer:

   @NgModule({ declarations: [MyComponent], imports: [BrowserModule] }) export class MyModule {} -> Option C

4. Quick Check:

   Correct keys and arrays = A [OK]

Hint: Use 'declarations' and 'imports' keys with arrays [OK]

Common Mistakes:

• Using 'components' instead of 'declarations'
• Forgetting to wrap in arrays
• Misspelling 'imports' as 'import'

3. Given this Angular module code, what will be the value of AppModule.bootstrap.length?

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

medium

A. Error at runtime

B. 1

C. undefined

D. 0

Solution

1. Step 1: Examine class properties after decorator

   The @NgModule decorator processes metadata internally but does not add a 'bootstrap' static property to the AppModule class.

2. Step 2: Evaluate AppModule.bootstrap.length

   AppModule.bootstrap is undefined. Attempting .length on undefined throws a TypeError at runtime.

3. Final Answer:

   Error at runtime -> Option A

4. Quick Check:

   undefined.length = runtime error [OK]

Hint: Decorators don't add class properties directly [OK]

Common Mistakes:

• Thinking bootstrap becomes a class property
• Confusing metadata access with class props
• Assuming length 1 from config

4. Identify the error in this Angular module declaration:

@NgModule({
  declarations: MyComponent,
  imports: [BrowserModule]
})
export class MyModule {}

medium

A. Missing bootstrap array is an error

B. declarations should be an array, not a single component

C. imports should be a single module, not an array

D. NgModule decorator is missing

Solution

1. Step 1: Check declarations syntax

   The declarations property must be an array, but here it is a single component without brackets.

2. Step 2: Verify imports and other metadata

   imports is correctly an array. Bootstrap is optional, so no error there.

3. Final Answer:

   declarations should be an array, not a single component -> Option B

4. Quick Check:

   Declarations must be arrays = C [OK]

Hint: Always wrap declarations in square brackets [OK]

Common Mistakes:

• Forgetting brackets around declarations
• Thinking bootstrap is mandatory
• Misunderstanding imports array syntax

5. You want to create an Angular module that uses a service from another module and also bootstraps a main component. Which NgModule metadata properties must you include to achieve this?

hard

A. imports for styles, declarations for modules, and providers for components

B. declarations for services, imports for components, and bootstrap for styles

C. providers for components, declarations for services, and bootstrap for modules

D. imports to bring in the other module, providers for services, and bootstrap for the main component

Solution

1. Step 1: Include imports for external modules

   To use services from another module, you must import that module using imports.

2. Step 2: Use providers for services and bootstrap for main component

   If you provide services directly, use providers. To start the app with a component, use bootstrap.

3. Final Answer:

   imports to bring in the other module, providers for services, and bootstrap for the main component -> Option D

4. Quick Check:

   imports + providers + bootstrap = D [OK]

Hint: Use imports for modules, providers for services, bootstrap for start [OK]

Common Mistakes:

• Mixing declarations with services
• Using providers for components
• Confusing bootstrap with styles