NgModule decorator and metadata in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @NgModule decorator in Angular?

The @NgModule decorator defines a module in Angular. It organizes related components, directives, pipes, and services into a cohesive block, making the app easier to manage and scale.

beginner

Name four main metadata properties inside the @NgModule decorator.

The four main metadata properties are:
1. declarations: Components, directives, and pipes that belong to this module.
2. imports: Other modules whose exported classes are needed.
3. providers: Services available for dependency injection.
4. bootstrap: The root component to start the app (usually in the root module).

beginner

What does the declarations array in @NgModule metadata contain?

The declarations array lists components, directives, and pipes that belong to this module. These are the building blocks that the module manages and can use internally.

beginner

Explain the role of the imports array in @NgModule.

The imports array includes other Angular modules whose exported components, directives, or pipes are needed in this module. It allows sharing features between modules.

beginner

What is the function of the bootstrap property in @NgModule?

The bootstrap property lists the root component(s) that Angular should load when starting the app. It is usually used only in the root module to launch the main UI.

Which @NgModule metadata property is used to declare components, directives, and pipes?

A declarations

B imports

C providers

D bootstrap

The declarations array is where you list components, directives, and pipes that belong to the module.

Where do you specify services that should be available for dependency injection in an Angular module?

A imports

B providers

C declarations

D bootstrap

The providers array is used to register services for dependency injection.

What is the purpose of the imports array in @NgModule?

A To start the app

B To list components to display

C To register services

D To include other modules needed

The imports array includes other modules whose exported features are needed.

Which @NgModule property is typically used only in the root module?

A declarations

B providers

C bootstrap

D imports

The bootstrap property lists the root component to launch the app and is usually only in the root module.

Can you declare the same component in multiple Angular modules?

A No, a component can only be declared in one module

B Only if the modules are lazy loaded

C Yes, but only if imported

D Yes, always

A component can only be declared in one module to avoid conflicts.

Describe the role of the @NgModule decorator and its main metadata properties in Angular.

Think about how Angular organizes code into blocks.

Explain why the bootstrap property is important and where it is used.

Consider what happens when the app first loads.

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