Migrating from NgModules in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Standalone Component Import Behavior

Consider an Angular standalone component ProfileCard that you want to use inside another standalone component Dashboard. How should you import ProfileCard into Dashboard to display it correctly?

Angular

import { Component } from '@angular/core';
import { ProfileCard } from './profile-card.component';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [/* What goes here? */],
  template: `<app-profile-card></app-profile-card>`
})
export class Dashboard {}

A Declare ProfileCard in the declarations array of Dashboard's NgModule.

B Add ProfileCard to the imports array in the @Component decorator of Dashboard.

C Add ProfileCard to the providers array in Dashboard component.

D No import needed; Angular automatically detects standalone components.

💡 Hint

Standalone components must be explicitly imported in the imports array of the component using them.

Standalone components are imported via the imports array in the @Component decorator. Unlike NgModules, you do not declare them in declarations or providers.

📝 Syntax

intermediate

Correct Syntax for Standalone Component Declaration

Which of the following is the correct way to declare a standalone Angular component named AlertBox?

A @Component({ selector: 'app-alert-box', standalone: true, template: `<p>Alert!</p>` }) export class AlertBox {}

B @Component({ selector: 'app-alert-box', standalone: true }) export class AlertBox {}

C @Component({ selector: 'app-alert-box', standalone: true, templateUrl: 'alert-box.html' }) export class AlertBox {}

D @Component({ selector: 'app-alert-box', standalone: false, template: `<p>Alert!</p>` }) export class AlertBox {}

💡 Hint

Standalone components require the standalone flag set to true and a template or templateUrl.

Option A correctly sets standalone: true and provides an inline template. Option A has standalone false, so it's not standalone. Option A uses templateUrl but does not specify the file extension properly (missing quotes or path). Option A lacks a template or templateUrl, so it will cause an error.

🔧 Debug

advanced

Error When Using a Standalone Component Without Import

You have a standalone component UserCard and a standalone component AppRoot. You use <app-user-card> inside AppRoot template but forget to import UserCard in AppRoot. What error will Angular throw at runtime?

A No error; Angular automatically resolves standalone components

B NullInjectorError: No provider for UserCard

C SyntaxError: Unexpected token '<' in template

D Template parse error: 'app-user-card' is not a known element

💡 Hint

Angular needs components to be imported to recognize their selectors in templates.

If a standalone component is used in a template but not imported, Angular cannot recognize its selector and throws a template parse error.

❓ state_output

advanced

Effect of Removing NgModule on Service Injection

You migrate a feature module to standalone components and remove its NgModule. You have a service DataService provided in the removed module. What happens to the service injection in components that used to rely on that module?

A Service injection fails with No provider error unless the service is provided elsewhere.

B Service injection continues to work because Angular automatically provides services globally.

C Service injection works only if the service is provided in the component's providers array.

D Service injection works only if the service is provided in the root injector.

💡 Hint

Removing the NgModule removes its providers unless they are moved or provided elsewhere.

When you remove an NgModule, any services provided in it are no longer available unless you provide them in standalone components or at root level.

🧠 Conceptual

expert

Advantages of Standalone Components Over NgModules

Which of the following is NOT an advantage of migrating from NgModules to standalone components in Angular?

A Simplifies component dependencies by importing only what is needed directly in components.

B Eliminates the need for NgModule metadata, reducing boilerplate code.

C Automatically improves runtime performance by lazy loading all components.

D Enables easier tree-shaking and smaller bundle sizes.

💡 Hint

Consider what standalone components change and what they do not automatically do.

Standalone components simplify imports and reduce boilerplate, improving tree-shaking. However, lazy loading is a separate feature and not automatically applied to all standalone components.

Practice

1. What is the main benefit of migrating from NgModules to standalone components in Angular?

easy

A. Simplifies the app by removing the need for NgModules

B. Requires more boilerplate code for each component

C. Makes the app slower to load

D. Forces use of class-based components only

Solution

1. Step 1: Understand NgModules role

   NgModules group components and services but add complexity.

2. Step 2: Benefits of standalone components

   Standalone components remove NgModules, making the app simpler and easier to maintain.

3. Final Answer:

   Simplifies the app by removing the need for NgModules -> Option A

4. Quick Check:

   Standalone components simplify Angular apps by removing NgModules [OK]

Hint: Standalone means no NgModules needed, simpler setup [OK]

Common Mistakes:

• Thinking standalone components require more code
• Believing NgModules improve app speed
• Confusing standalone with class-based restriction

2. Which of the following is the correct way to declare a standalone component in Angular?

easy

A. @Component({ standalone: false, selector: 'app-hello', template: 'Hello' })

B. @Component({ module: true, selector: 'app-hello', template: 'Hello' })

C. @NgModule({ standalone: true, declarations: [HelloComponent] })

D. @Component({ standalone: true, selector: 'app-hello', template: 'Hello' })

Solution

1. Step 1: Identify standalone component syntax

   The correct property is standalone: true inside the @Component decorator.

2. Step 2: Check other options

   The other options are incorrect: one sets standalone: false, another uses invalid module property, and one misuses @NgModule.

3. Final Answer:

   @Component({ standalone: true, selector: 'app-hello', template: '<p>Hello</p>' }) -> Option D

4. Quick Check:

   standalone: true inside @Component decorator [OK]

Hint: Look for standalone: true inside @Component decorator [OK]

Common Mistakes:

• Using @NgModule instead of @Component for standalone
• Setting standalone to false or missing it
• Confusing module property with standalone

3. Given this code snippet, what will be the output when the app runs?

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
{{ title }}
`
})
export class AppComponent {
  title = 'Hello Angular Standalone';
}

bootstrapApplication(AppComponent);

medium

A. undefined

B. Error: bootstrapModule is required

C. Hello Angular Standalone

D. Blank page with no content

Solution

1. Step 1: Understand bootstrapApplication usage

   Using bootstrapApplication with a standalone component boots the app correctly.

2. Step 2: Check component template and data

   The template shows <h1>{{ title }}</h1> and title is set to 'Hello Angular Standalone'.

3. Final Answer:

   <h1>Hello Angular Standalone</h1> -> Option C

4. Quick Check:

   bootstrapApplication with standalone component renders {{ title }} [OK]

Hint: bootstrapApplication runs standalone component, shows title [OK]

Common Mistakes:

• Expecting bootstrapModule instead of bootstrapApplication
• Assuming title is undefined without constructor
• Thinking template won't render without NgModule

4. Identify the error in this code snippet migrating from NgModules:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
Welcome
`
})
export class AppComponent {}

bootstrapApplication(AppComponent, {
  providers: []
});

medium

A. bootstrapApplication requires bootstrapModule instead

B. Missing imports array for dependencies in @Component

C. Standalone components cannot have providers

D. Selector 'app-root' is invalid for standalone components

Solution

1. Step 1: Check standalone component dependencies

   If the component uses other modules or components, they must be listed in the imports array inside @Component.

2. Step 2: Analyze given code

   The component has no imports array. The template uses *ngIf, which requires CommonModule in imports.

3. Final Answer:

   Missing imports array for dependencies in @Component -> Option B

4. Quick Check:

   Standalone components need imports: [CommonModule] for directives like *ngIf [OK]

Hint: Standalone components need imports for dependencies [OK]

Common Mistakes:

• Thinking bootstrapApplication needs bootstrapModule
• Believing providers are disallowed in standalone
• Assuming selector rules changed for standalone

5. You want to migrate an Angular app from NgModules to standalone components. Which combination correctly replaces the traditional bootstrap method and module imports?

1. Use bootstrapApplication() instead of platformBrowserDynamic().bootstrapModule()
2. Add standalone: true to components
3. Use imports array inside @Component for dependencies
4. Keep NgModule declarations as before

hard

A. Apply steps 1, 2, and 3; remove NgModules completely

B. Only step 1 is needed; keep NgModules and declarations

C. Apply steps 2 and 4; bootstrapModule remains required

D. Use step 4 only; standalone components are optional

Solution

1. Step 1: Replace bootstrap method

   Use bootstrapApplication() to start the app without NgModules.

2. Step 2: Convert components to standalone

   Add standalone: true to components to remove NgModule dependency.

3. Step 3: Manage dependencies with imports

   Use imports array inside @Component to include needed modules or components.

4. Step 4: Remove NgModules

   NgModules are no longer needed and should be removed for full migration.

5. Final Answer:

   Apply steps 1, 2, and 3; remove NgModules completely -> Option A

6. Quick Check:

   bootstrapApplication + standalone: true + imports array, no NgModules [OK]

Hint: Use bootstrapApplication + standalone + imports, drop NgModules [OK]

Common Mistakes:

• Trying to keep NgModules with bootstrapApplication
• Forgetting to add standalone: true to components
• Not using imports array for dependencies