Recommended
HttpClient from Angular's @angular/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.
FormsModule in an Angular module but use [(ngModel)] in a component template?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.
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(['/']); }
}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.
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.
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?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'.