NgModule decorator and metadata in Angular

Introduction

The NgModule decorator helps organize your Angular app by grouping components, directives, and services together.

When you want to group related components and services in one place.

When you need to tell Angular which components belong to your app.

When you want to import other modules to use their features.

When you want to make some components or services available outside the module.

When you want to bootstrap the main component to start your app.

Syntax

Angular

@NgModule({
  declarations: [Component1, Component2],
  imports: [OtherModule],
  providers: [Service1],
  exports: [Component1],
  bootstrap: [AppComponent]
})
export class AppModule {}

declarations lists components, directives, and pipes that belong to this module.

imports includes other modules whose features you want to use.

Examples

This example declares two components and bootstraps the HomeComponent to start the app.

Angular

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

This module declares a login component, imports form features, provides an authentication service, and exports the login component for use in other modules.

Angular

@NgModule({
  declarations: [LoginComponent],
  imports: [FormsModule],
  providers: [AuthService],
  exports: [LoginComponent]
})
export class AuthModule {}

Sample Program

This is a simple Angular module that groups two components and starts the app with AppComponent.

Angular

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

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

Important Notes

Every Angular app has at least one module called the root module.

Use declarations only for components, directives, and pipes.

Services go in providers if you want to provide them at the module level.

Summary

NgModule groups related parts of your Angular app.

It uses metadata like declarations, imports, providers, and bootstrap.

This helps Angular know what to load and how to start your app.

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