Trace the value, not the component

Build one Value Trace before editing the visible component.

For one value, establish what it is supposed to mean, which source is authoritative in the current phase, how the consumer derives it, every path that can write or replace it, which concrete runtime instance owns it, which item it belongs to, and which prerequisites must be ready before the value is valid.

Then repair the first boundary where evidence shows that the actual value path violates the intended contract.

A stale Angular component can be the last observer of an earlier failure.

Sometimes the defect really is local: CSS clips correct text, a template condition is wrong, or a binding points at the wrong property. Value Trace must be able to leave those cases alone.

Other failures become visible in a component after the real break already happened:

• two consumers inject the same service class but receive different runtime instances;
• a derived value still reads an old snapshot after authority moved elsewhere;
• a form contains the correct user edit and another writer overwrites it later;
• a one-item implementation becomes a collection but keeps one shared reference;
• a value is observed before all prerequisites are valid.

These are different causes. The shared debugging move is to reconstruct the provenance of the wrong value before changing the last consumer.

Contract, authority, derivation, writers, owner, identity, readiness.

1. Observation: freeze the exact actual value, expected value, consumer, reproducing action, and phase.
2. Contract: prove what should agree, intentionally differ, or remain frozen.
3. Authority: identify which source is allowed to win in the current phase, or record UNKNOWN.
4. Derivation: follow the material read path from authority to consumer.
5. Writers: enumerate set/update, dispatch, next, setValue, patchValue, reset, effects, subscriptions, route changes, and other replacement paths.
6. Runtime owner: prove the concrete service/store/form/signal instance, not just the class name.
7. Identity: for repeated UI, prove which item or control the value belongs to and preserve cardinality.
8. Readiness: list prerequisites and whether partial state is valid.

Classify every material edge.

A repair boundary cannot rest on INFERRED or UNKNOWN evidence alone. Observed precedence is also not enough: happening first does not prove causality.

Choose the earliest causally evidenced contract violation.

Do not automatically choose the first structural difference, the first file opened, the component that renders the symptom, the newest Angular API, or the place where an exception appears.

If multiple candidate causes remain observationally equivalent, return STOP_UNKNOWN. If no material contract violation exists, return STOP_NO_VIOLATION and investigate another layer.

Same service class, different runtime owner.

A toolbar writes selection B to SelectionStore. A nested results panel still reads A. Both components call inject(SelectionStore).

This does not mean component providers are bad. Local scope is correct when independent component state is the contract.

Current Angular reference: Injector Tree.

The method is not tied to Signals or one Angular version.

Angular 22 is under active support as of 2026-10-05. Current Angular adapters include Injector Tree inspection, signals and computed() for derivation, Reactive Forms for explicit form-model state, and signal queries such as viewChildren().

Angular's current guidance says effects should be the last API reached for when derived state can be represented with computed() or linkedSignal(). That is useful adapter guidance, not the thesis of Value Trace.

Maintained Angular 9-21 applications can apply the same method with version-appropriate provider, RxJS, forms, and query mechanisms. Do not modernize a production application merely to use the debugging procedure.

Current references: Angular releases, version compatibility, effects guidance, Reactive Forms, viewChildren().

Do not edit the stale component first.

Before proposing a fix, return the observation, expected contract, authority phase, derivation path, writers and activation conditions, runtime owner facts, identity constraints, readiness prerequisites, intended differences, evidence gaps, evidence class for each material edge, first causally evidenced violation or STOP reason, smallest justified repair boundary, counterfactual verification, and a nearby valid adversarial check.

The procedure has an Angular 22 source-blind runtime proof.

The private proof package was generated with Angular CLI 22.2.1. It executes F1-F6 plus V1-V6 under Angular/Vitest: 12 Value Trace fixture tests. Two generated application smoke tests also pass, for 14/14 total. Locked install and production build pass in CI.

The public proof companion is intentionally not linked yet. It remains behind a separate publication decision, so the machine index and WebMCP surface do not advertise a proof URL that is not public.

What Value Trace does not claim.

• It does not claim most Angular bugs are data-flow bugs.
• It does not claim Signals solve state architecture.
• It does not say one writable source is always sufficient.
• It does not say local providers are wrong.
• It does not say multiple writers are wrong by definition.
• It does not say partial state is always invalid.
• It does not replace CSS, template, browser, network, or backend debugging.

The older Angular note remains separate.

5 Angular bugs that were really ownership and data-flow problems preserves useful examples and historical framing. It is related context, not the canonical identity of this procedure.

Clean Markdown alternate · Project knowledge index