13 Common Angular Mistakes and How to Catch Them

1. Staying on AngularJS or an Unsupported Angular Version

The AngularJS website states that AngularJS support "has officially ended as of January 2022".

AngularJS-era advice in older guides, such as watcher limits, $applyAsync() or the Batarang extension, applies only to that unsupported 1.x line.

Modern Angular has a support window too. The Angular releases page lists v22 as active since June 3, 2026, v20 and v21 in long-term support, and says "Angular versions v2 to v19 are no longer supported."

To catch it, run ng version in each app and compare the @angular/core line with the releases table; the lab project reported 22.2.3. For an AngularJS app, the differences that shape a migration are covered in Angular vs AngularJS.

2. Leaving Subscriptions Open After Destroy

A subscription made in a constructor lives until something unsubscribes it. When the source is a Subject in a root service, destroying the component does not stop the callback, and the closure keeps the destroyed component reachable.

@Component({ selector: 'app-leaky-ticker', template: '{{ last() }}' })
export class LeakyTicker {
  readonly last = signal(0);
  constructor() {
    inject(PriceFeed).prices.subscribe((p) => this.last.set(p));
  }
}

@Component({ selector: 'app-safe-ticker', template: '{{ last() }}' })
export class SafeTicker {
  readonly last = signal(0);
  constructor() {
    inject(PriceFeed)
      .prices.pipe(takeUntilDestroyed())
      .subscribe((p) => this.last.set(p));
  }
}

The spec destroys each component and asks the Subject whether anyone is still listening:

import { TestBed } from '@angular/core/testing';
import { LeakyTicker, PriceFeed, SafeTicker } from './m02-subscriptions';

it.each([
  ['LeakyTicker', LeakyTicker],
  ['SafeTicker', SafeTicker],
])('%s stops listening when destroyed', (_, Ticker) => {
  const feed = TestBed.inject(PriceFeed);
  const fixture = TestBed.createComponent(Ticker);
  fixture.destroy();
  expect(feed.prices.observed).toBe(false);
});

Vitest output (excerpt):

   × LeakyTicker stops listening when destroyed 59ms
   ✓ SafeTicker stops listening when destroyed 7ms

AssertionError: expected true to be false // Object.is equality

takeUntilDestroyed() from @angular/core/rxjs-interop completes the subscription when the component is destroyed, without a separate Subject. To confirm a leak in a running browser with heap snapshots, see this guide to memory leak testing in JavaScript.

3. Nesting subscribe() Calls

An inner subscribe() inside an outer one starts a new request for every value and never cancels the previous one. When an older request answers last, its result overwrites the newer one.

// Short terms answer slowly, long terms answer fast: a typing race.
export function search(term: string) {
  const delay = term.length < 4 ? 300 : 100;
  return timer(delay).pipe(map(() => `hits:${term}`));
}

@Component({ selector: 'app-nested-search', template: '' })
export class NestedSearch {
  readonly terms = new Subject<string>();
  readonly result = signal('');
  constructor() {
    this.terms.subscribe((term) => {
      search(term).subscribe((hits) => this.result.set(hits));
    });
  }
}

The fix pipes the terms through switchMap(), which unsubscribes from the previous inner observable when a new term arrives:

@Component({ selector: 'app-switch-search', template: '' })
export class SwitchSearch {
  readonly terms = new Subject<string>();
  readonly result = signal('');
  constructor() {
    this.terms
      .pipe(switchMap(search), takeUntilDestroyed())
      .subscribe((hits) => this.result.set(hits));
  }
}

The spec uses Vitest fake timers to type "ang", wait 50 ms, type "angular" and then let 400 ms pass:

beforeEach(() => vi.useFakeTimers());
afterEach(() => vi.useRealTimers());

it.each([
  ['NestedSearch', NestedSearch],
  ['SwitchSearch', SwitchSearch],
])('%s shows hits for the latest term', (_, Search) => {
  const box = TestBed.createComponent(Search).componentInstance;
  box.terms.next('ang');
  vi.advanceTimersByTime(50);
  box.terms.next('angular');
  vi.advanceTimersByTime(400);
  expect(box.result()).toBe('hits:angular');
});

SwitchSearch passed, and NestedSearch ended on the stale result:

AssertionError: expected 'hits:ang' to be 'hits:angular' // Object.is equality

Expected: "hits:angular"
Received: "hits:ang"

4. Calling Methods in Templates

A method called in a template runs on every refresh of that view, even when its inputs have not changed. Reading a signal such as clock() in a template is a cheap getter; calling a method that sorts, filters or sums data is not.

@Component({
  selector: 'app-cart-method',
  template: '{{ total() }} | {{ clock() }}',
})
export class CartWithMethod {
  readonly prices = signal([19, 5, 12]);
  readonly clock = signal(0);
  total() {
    runs.method++;
    return this.prices().reduce((sum, p) => sum + p, 0);
  }
}

A computed() signal caches its value and recalculates only when a signal it reads changes:

@Component({
  selector: 'app-cart-computed',
  template: '{{ total() }} | {{ clock() }}',
})
export class CartWithComputed {
  readonly prices = signal([19, 5, 12]);
  readonly clock = signal(0);
  readonly total = computed(() => {
    runs.computed++;
    return this.prices().reduce((sum, p) => sum + p, 0);
  });
}

Each component rendered once and then refreshed 10 times with only clock changing. The spec logged:

method: 11, computed: 1

Eleven runs of a three-item sum cost nothing. The same pattern around a sort over thousands of rows repeats that sort on every refresh, which is why the work belongs in computed() or a pure pipe.

5. Tracking @for Items by Object Identity

The track expression in an @for block tells Angular which DOM node belongs to which item. Tracking the object itself works until an immutable update replaces every object with a copy.

@Component({
  selector: 'app-todos-by-object',
  template: `<ul>
    @for (todo of todos(); track todo) {
      <li>{{ todo.title }}</li>
    }
  </ul>`,
})
export class TodosByObject {
  readonly todos = signal(TODOS);
  markAll() {
    this.todos.update((list) =>
      list.map((t) => ({ ...t, title: `${t.title} (done)` })),
    );
  }
}

After markAll(), the spec compared each list item with the node rendered before the update. With track todo, Angular kept none of them and logged this warning in dev mode:

kept 0/3 [
  'NG0956: The configured tracking expression (track by identity) caused re-creation of the entire collection of size 3. This is an expensive operation requiring destruction and subsequent creation of DOM nodes, directives, components etc. Please review the "track expression" and make sure that it uniquely identifies items in a collection. Find more at https://v22.angular.dev/errors/NG0956'
]

The same component with track todo.id kept every node and logged nothing.

The NG0956 error reference adds that re-creating the DOM can lose state such as focus or text selection, and recommends a key that uniquely identifies each item.

6. Mutating State That Angular Cannot See

The Angular zoneless guide says "Zoneless is the default in Angular v21+", and lists what notifies Angular to refresh a view: a signal read in the template changing, a bound template or host listener, markForCheck(), and ComponentRef.setInput.

A plain field assigned inside setTimeout is none of these:

@Component({
  selector: 'app-save-field',
  template: '<p>{{ status }}</p>',
})
export class SaveWithField {
  status = 'idle';
  save() {
    setTimeout(() => (this.status = 'saved'), 100);
  }
}

Signals have a trap of their own. push() changes the array inside the signal without notifying it, so the computed() count never recalculates:

@Component({
  selector: 'app-guests-push',
  template: '<p>{{ count() }} guests</p>',
})
export class GuestsPush {
  readonly guests = signal<string[]>([]);
  readonly count = computed(() => this.guests().length);
  add(name: string) {
    this.guests().push(name);
  }
}

The fixed versions call this.status.set('saved') and this.guests.update((list) => [...list, name]). After a 150 ms wait, the field version still showed "idle", and the push version still showed "0 guests":

   × SaveWithField renders "saved" after the timer 214ms
   ✓ SaveWithSignal renders "saved" after the timer 164ms
   × GuestsPush shows 1 guest after add() 16ms
   ✓ GuestsUpdate shows 1 guest after add() 33ms

The lab project, created with the Angular 22 CLI, has no zone.js dependency at all. Code that relied on zone.js to refresh the view after every timer or request hits this bug when the app moves to zoneless change detection.

The npm download count for zone.js was 25,938,055 for September 2026.

7. Using effect() for Derived State

The Angular effects guide says "Effects should be the last API you reach for" and recommends computed() for derived values and linkedSignal() for values that are derived but can also be set by hand. It also warns that propagating state through effects can cause ExpressionChangedAfterItHasBeenChecked errors, circular updates or extra change detection cycles.

@Component({ selector: 'app-name-effect', template: '{{ fullName() }}' })
export class NameViaEffect {
  readonly first = signal('Ada');
  readonly last = signal('Lovelace');
  readonly fullName = signal('');
  constructor() {
    effect(() => this.fullName.set(`${this.first()} ${this.last()}`));
  }
}

@Component({ selector: 'app-name-computed', template: '{{ fullName() }}' })
export class NameViaComputed {
  readonly first = signal('Ada');
  readonly last = signal('Lovelace');
  readonly fullName = computed(() => `${this.first()} ${this.last()}`);
}

An effect runs some time after the write that triggers it. The spec set first to "Grace" and read fullName() on the next line; NameViaComputed passed, and NameViaEffect returned the old value:

AssertionError: expected 'Ada Lovelace' to be 'Grace Lovelace' // Object.is equality

Expected: "Grace Lovelace"
Received: "Ada Lovelace"

8. Querying the Global document

document.querySelector() searches the whole Document Object Model, not the component, so it returns the first match from any instance on the page. With two charts rendered side by side, the second ChartQuery grabbed the first chart's canvas.

@Component({
  selector: 'app-chart-query',
  template: '<canvas class="chart"></canvas>',
})
export class ChartQuery implements OnInit {
  canvas: HTMLCanvasElement | null = null;
  ngOnInit() {
    this.canvas = document.querySelector('canvas.chart');
  }
}

viewChild() scopes the query to the component's own template, and afterNextRender() reads it once the view exists:

@Component({
  selector: 'app-chart-view-child',
  template: '<canvas #chart></canvas>',
})
export class ChartViewChild {
  readonly chart =
    viewChild.required<ElementRef<HTMLCanvasElement>>('chart');
  canvas: HTMLCanvasElement | null = null;
  constructor() {
    afterNextRender(() => (this.canvas = this.chart().nativeElement));
  }
}

The spec checks which canvas the second instance holds; ChartQuery held index 0 instead of 1:

   × second ChartQuery holds its own <canvas> 75ms
   ✓ second ChartViewChild holds its own <canvas> 12ms

AssertionError: expected +0 to be 1 // Object.is equality

The Angular SSR guide gives a second reason: on the server, globals such as window and document are not available. It recommends afterNextRender() and afterEveryRender() for browser-only code, because those hooks are skipped on the server.

9. Keeping Business Logic in Components

A pricing rule written inside a component can only be tested through TestBed, a fixture and a rendered template. Moved into a plain function, the same rule runs in a test with no Angular setup at all.

export interface Line {
  price: number;
  qty: number;
}

export function cartTotal(lines: Line[], coupon?: 'SAVE10'): number {
  const sum = lines.reduce((total, l) => total + l.price * l.qty, 0);
  return coupon === 'SAVE10' ? Math.round(sum * 90) / 100 : sum;
}

import { cartTotal } from './m09-cart-total';

const lines = [
  { price: 20, qty: 2 },
  { price: 5, qty: 1 },
];

it('adds price x qty for every line', () => {
  expect(cartTotal(lines)).toBe(45);
});

it('takes 10% off the whole cart with SAVE10', () => {
  expect(cartTotal(lines, 'SAVE10')).toBe(40.5);
});

Both tests passed without TestBed. The component keeps only the wiring, such as a computed() that calls cartTotal() with the current lines and coupon, and the component-level tests that remain follow the patterns in this practical approach to Angular testing.

10. Silencing Template Type Checks With any

The lab's tsconfig.json does not mention strictTemplates, yet ng build type-checked the template and rejected a misspelled property on a typed object:

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

interface User {
  name: string;
  email: string;
}

@Component({
  selector: 'app-profile',
  template: '<h2>{{ user.nmae }}</h2>',
})
export class Profile {
  user: User = { name: 'Ada', email: 'ada@example.com' };
}

X [ERROR] TS2339: Property 'nmae' does not exist on type 'User'. [plugin angular-compiler]

Changing the field to user: any made the same build succeed, and a render spec confirmed the heading came out empty. Give API responses an interface instead, and treat any on a template-bound field as a review flag.

11. Declaring a Component in Two NgModules

A non-standalone component can belong to only one NgModule. Sharing it by declaring it in a second module fails the build:

import { Component, NgModule } from '@angular/core';

@Component({
  selector: 'app-price-tag',
  template: '<span>On sale</span>',
  standalone: false,
})
export class PriceTag {}

@NgModule({ declarations: [PriceTag], exports: [PriceTag] })
export class ShopModule {}

@NgModule({ declarations: [PriceTag], exports: [PriceTag] })
export class AdminModule {}

ng build output, with the file location lines removed:

X [ERROR] NG6007: The Component 'PriceTag' is declared by more than one NgModule. [plugin angular-compiler]
  'PriceTag' is listed in the declarations of the NgModule 'ShopModule'.
  'PriceTag' is listed in the declarations of the NgModule 'AdminModule'.

A standalone component needs no module, and every page that uses it imports it directly. This version built cleanly, with an admin page importing SaleBadge the same way:

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

@Component({
  selector: 'app-sale-badge',
  template: '<span>On sale</span>',
})
export class SaleBadge {}

@Component({
  selector: 'app-shop-page',
  imports: [SaleBadge],
  template: '<app-sale-badge />',
})
export class ShopPage {}

For a large NgModule codebase, the standalone migration runs as ng generate @angular/core:standalone in three passes: convert declarations, remove unnecessary NgModules, then bootstrap with bootstrapApplication.

That command comes from the Angular docs and was not run in this lab.

12. Eager-Loading Every Route

A component referenced with component: in the route table ships in the initial bundle, along with everything it imports. In the lab, a reports page that imported a large generated dataset did exactly that:

import { Routes } from '@angular/router';
import { Reports } from './lab/m12-reports';

export const routes: Routes = [
  { path: 'reports', component: Reports },
];

Initial chunk files | Names         |  Raw size | Estimated transfer size
main-6OXQP3WH.js    | main          | 723.38 kB |                86.31 kB
styles-5INURTSO.css | styles        |   0 bytes |                 0 bytes

                    | Initial total | 723.38 kB |                86.31 kB

▲ [WARNING] bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 223.38 kB with a total of 723.38 kB.

The 500 kB warning comes from the budgets the CLI writes into angular.json for every new project. Switching the route to loadComponent() moved the page and its data into a lazy chunk:

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'reports',
    loadComponent: () =>
      import('./lab/m12-reports').then((m) => m.Reports),
  },
];

                    | Initial total | 218.80 kB |                61.25 kB

Lazy chunk files    | Names         |  Raw size | Estimated transfer size
chunk-X2BA2UCK.js   | m12-reports   | 506.04 kB |                27.42 kB

The initial bundle fell from 723.38 kB to 218.80 kB. Keep the budget warning visible in CI so a new eager import shows up in review instead of on users' first load.

13. Treating jsdom Tests as Browser Coverage

The Angular Vitest guide says Vitest uses a DOM emulation library by default, happy-dom if it is installed and jsdom otherwise, and that real-browser runs need a browser provider and the browsers option.

Every unit test above ran in Node.js, and a DOM emulator is not the engine your users run, so the lab added one Playwright test for the guest book page. It uses the cloud fixture from the Playwright skill, with tunnel: true and a tunnelName added to its LT:Options:

import { expect, test } from './cloud';

test('adds a guest', async ({ page }) => {
  await page.goto('http://localhost:4200/');
  await page.getByLabel('Guest name').fill('Ada');
  await page.getByRole('button', { name: 'Add guest' }).click();
  await expect(page.getByTestId('count')).toHaveText('1 guests');
  await expect(page.getByRole('listitem')).toHaveText(['Ada']);
});

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  timeout: 90_000,
  reporter: 'list',
  projects: [
    { name: 'Chrome:latest:Windows 11@lambdatest' },
    { name: 'MicrosoftEdge:latest:Windows 11@lambdatest' },
    { name: 'pw-firefox:latest:Windows 11@lambdatest' },
    { name: 'pw-webkit:latest:macOS Sequoia@lambdatest' },
  ],
});

TestMu AI Automation Cloud runs an existing Playwright, Selenium, Cypress or Puppeteer suite across 3,000+ browser and OS combinations, and its tunnel lets those cloud browsers open an app served on localhost. With ng serve running locally, the test passed on Chrome 155 and Edge 155 on Windows 11, Playwright Firefox on Windows 11 and Playwright WebKit on macOS Sequoia, in build 109026057:

  ok 2 [MicrosoftEdge:latest:Windows 11@lambdatest] › e2e\guest-book.spec.ts:3:5 › adds a guest (26.8s)
  ok 4 [Chrome:latest:Windows 11@lambdatest] › e2e\guest-book.spec.ts:3:5 › adds a guest (27.2s)
  ok 1 [pw-webkit:latest:macOS Sequoia@lambdatest] › e2e\guest-book.spec.ts:3:5 › adds a guest (37.5s)
  ok 3 [pw-firefox:latest:Windows 11@lambdatest] › e2e\guest-book.spec.ts:3:5 › adds a guest (37.9s)

  4 passed (42.3s)

Each session record showed tunnel: true. The setup for the tunnel itself is in the guide to testing locally hosted web pages, and a fuller end-to-end setup is in this Angular E2E testing tutorial.

Let Claude Code write Playwright tests that actually pass.

Install the Playwright Skill for FREE