NgModule decorator and metadata in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Angular module render?

Given the following Angular module and component setup, what will be rendered on the page?

Angular

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

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`
})
export class AppComponent {
  title = 'Hello Angular';
}

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

A <h1>Hello Angular</h1>

B Nothing renders because bootstrap is missing BrowserModule

C Error: AppComponent not declared

D <app-root></app-root>

💡 Hint

Check what the bootstrap array does and what the component template contains.

The AppComponent is declared and bootstrapped in AppModule. The template renders the title property inside an <h1> tag, so the output is <h1>Hello Angular</h1>.

📝 Syntax

intermediate

Which NgModule metadata property is missing here?

Identify the missing NgModule metadata property that causes this module to fail loading components from another module.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';

@NgModule({
  declarations: [SharedComponent],
  imports: [CommonModule]
})
export class SharedModule {}

A providers: [SharedComponent]

B schemas: [SharedComponent]

C bootstrap: [SharedComponent]

D exports: [SharedComponent]

💡 Hint

Think about how to make components available outside this module.

The exports property is needed to make SharedComponent usable in other modules that import SharedModule. Without it, the component is private to this module.

🔧 Debug

advanced

Why does this Angular module cause a runtime error?

Examine the NgModule metadata and identify the cause of the runtime error when trying to use FeatureComponent.

Angular

import { NgModule } from '@angular/core';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [],
  imports: [],
  bootstrap: [FeatureComponent]
})
export class FeatureModule {}

A FeatureComponent is not declared in declarations array

B FeatureComponent should be in imports array

C bootstrap array cannot contain components

D NgModule must have providers array

💡 Hint

Check what the declarations array controls.

Components must be declared in the declarations array to be recognized by the module. Bootstrapping a component not declared causes a runtime error.

🧠 Conceptual

advanced

What is the role of the 'providers' array in NgModule?

Choose the correct explanation of what the 'providers' array in an NgModule does.

A It lists modules that this module depends on.

B It declares components that belong to the module.

C It registers services that are available for dependency injection throughout the module.

D It specifies components to bootstrap when the app starts.

💡 Hint

Think about how Angular injects services.

The providers array registers services that Angular can inject into components and other services within the module.

❓ lifecycle

expert

What happens if you import the same Angular module twice in different feature modules?

Consider two feature modules both importing a shared module that provides a service. What is the effect on the service instance?

A The service instance is shared as a singleton across the app.

B Each feature module gets its own separate instance of the service.

C Angular throws a runtime error due to duplicate imports.

D The service is not available in either feature module.

💡 Hint

Think about how Angular creates service instances when modules are imported multiple times.

When a service is provided in a shared module (not at root), importing that module multiple times creates separate instances of the service for each importing module.

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