Importing dependencies directly in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct import syntax for Angular HttpClient

Which option correctly imports HttpClient from Angular's @angular/common/http package?

A import HttpClient from '@angular/http';

B import { HttpClient } from '@angular/common/http';

C import { HttpClientModule } from '@angular/common/http';

D import HttpClient from '@angular/common/http';

💡 Hint

Angular uses named imports for HttpClient from the common/http package.

The correct way to import HttpClient is using named imports from @angular/common/http. Option B uses this syntax. Option B tries default import which is invalid here. Option B imports the module, not the service. Option B uses a deprecated package path.

❓ component_behavior

intermediate

Effect of missing import on Angular component

What happens if you forget to import FormsModule in an Angular module but use [(ngModel)] in a component template?

A The app compiles and runs normally without any errors.

B The app compiles but <code>ngModel</code> binding does not work and throws a runtime error.

C The app fails to compile with a template parse error about <code>ngModel</code>.

D The app compiles but <code>ngModel</code> silently ignores changes.

💡 Hint

Angular requires importing modules that provide template directives.

If FormsModule is not imported, Angular does not recognize the ngModel directive and throws a template parse error during compilation. So option C is correct.

🔧 Debug

advanced

Identify the import error causing compilation failure

Given this Angular component code, which import mistake causes a compilation error when injecting Router?

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: ``
})
export class HomeComponent {
  constructor(private router: Router) {}
  goHome() { this.router.navigate(['/']); }
}

A Importing Router from '@angular/common' causes compilation error.

B Importing Router from '@angular/router' is correct; no error here.

C Importing Router from '@angular/core' causes compilation error.

D Not importing Router at all causes compilation error.

💡 Hint

Router must be imported from the correct Angular package.

The Router service must be imported from @angular/router. Importing it from @angular/common causes a TypeScript compilation error because that package does not export Router. Option A describes this mistake.

🧠 Conceptual

advanced

Why use standalone components with direct imports in Angular 17+?

What is the main advantage of importing dependencies directly in standalone Angular components instead of using NgModules?

A It disables lazy loading of components.

B It forces all components to share the same global scope.

C It requires manually declaring components in NgModules.

D It reduces boilerplate and improves tree-shaking for smaller bundles.

💡 Hint

Think about bundle size and code simplicity.

Standalone components with direct imports reduce the need for NgModules, which cuts boilerplate and helps Angular's build tools remove unused code (tree-shaking), resulting in smaller bundles. Option D is correct.

❓ state_output

expert

Output of Angular component with direct service import and injection

Consider this Angular service and component:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterService {
  count = 0;
  increment() { this.count++; }
}

import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  template: ``
})
export class CounterComponent {
  constructor(public counter: CounterService) {}
  increment() { this.counter.increment(); }
}

What will be displayed on the button after clicking it three times?

A Count: 3

B Count: undefined

C Count: 1

D Count: 0

💡 Hint

The service is singleton and state is shared.

The CounterService is provided in root, so the same instance is used. Each click calls increment() which increases count. After 3 clicks, the count is 3, so the button shows 'Count: 3'.