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.