Code review example: ngOnInIt is not a hook: the load method is dead code with a plausible name in Angular

Retired from the DiffDojo practice pool in October 2026; the review below is the canonical answer. An AI wrote this pull request for the task underneath. Read the diff and decide what you would say before you scroll to the review.

Angular · Hallucinated APIs & dependencies · beginner

The task

Categories page for the storefront

  1. Load the categories from CatalogService when the page initializes.
  2. Show the empty state only until they arrive.
  3. Follow the codebase convention: standalone components, signals for state.

Adds the categories page: fetches the list on init into a signal and renders it with the new control flow, with an empty state while loading. Follows the standalone-component conventions.

The diff

src/app/pages/categories/categories.ts+26
1+ import { Component, signal } from '@angular/core';
2+ import { CatalogService, Category } from '../../services/catalog.service';
3+
4+ @Component({
5+ selector: 'app-categories',
6+ template: `
7+ @if (categories().length) {
8+ <ul>
9+ @for (c of categories(); track c.id) {
10+ <li>{{ c.name }}</li>
11+ }
12+ </ul>
13+ } @else {
14+ <p class="empty">No categories yet.</p>
15+ }
16+ `,
17+ })
18+ export class CategoriesPage {
19+ categories = signal<Category[]>([]);
20+
21+ constructor(private catalog: CatalogService) {}
22+
23+ ngOnInIt(): void {
24+ this.catalog.getCategories().subscribe((list) => this.categories.set(list));
25+ }
26+ }

The review

Issue 1: ngOnInIt is not a hook: the load method is dead code with a plausible name

src/app/pages/categories/categories.ts, lines 18, 23, 24, 25

  1. Angular calls hooks by exact name. ngOnInIt (capital I) is just a method nobody invokes. There's no error, no warning: the framework looks for ngOnInit, doesn't find it, and moves on.
  2. The safety net was declined. implements OnInit would have made TypeScript demand a method named exactly ngOnInit, the one-line declaration exists precisely to catch this. The class skips it, so the compiler is happy with the dead method.
  3. The failure is silent and total. The page renders "No categories yet" forever. Nothing throws, the network tab shows no request, and a unit test that calls component.ngOnInIt() directly passes beautifully.

The fix: rename the method to ngOnInit and declare implements OnInit so the compiler enforces the contract.

The fix

export class CategoriesPage implements OnInit {
  categories = signal<Category[]>([]);

  constructor(private catalog: CatalogService) {}

  ngOnInit(): void {
    this.catalog.getCategories().subscribe((list) => this.categories.set(list));
  }
}

Why it matters

A lifecycle method in a class that doesn't declare its interface → check the spelling letter by letter. The framework matches by name; the compiler only helps if you ask it to.

Real-world stakes: the page ships, works in the author's memory (they tested the service, not the mount), and users see a permanently empty screen with zero errors in monitoring. Name-based hallucinations are a signature model failure: ngOnInIt, ngAfterViewInIt, componentDidMonut, one wrong glyph in a name only the framework reads.

Read more: angular ngOnInit not called, implements OnInit typescript, angular lifecycle hook exact name

The verdict

Request changes. ngOnInIt is not a hook: the load method is dead code with a plausible name

Try a live one

Angular PRs you have not seen the answer to.

Leave inline comments and a verdict, then see what you caught. Free, no signup.

Review an Angular PR →

How to review Angular code · All code review examples