<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>André Ramos — Writing</title>
  <link href="https://andreramos.dev/feed.xml" rel="self"/>
  <link href="https://andreramos.dev/writing/"/>
  <id>https://andreramos.dev/feed.xml</id>
  <updated>2026-06-19T00:00:00Z</updated>
  <author><name>André Ramos</name></author>
  <entry>
    <title>How I Use AI Agents Day to Day Without Handing Them the Wheel</title>
    <link href="https://andreramos.dev/angular/ai-agents-day-to-day/"/>
    <id>https://andreramos.dev/angular/ai-agents-day-to-day/</id>
    <updated>2026-06-19T00:00:00Z</updated>
    <summary>A production filter for daily AI-agent work: what I delegate, what I keep, and where review remains the engineering boundary.</summary>
  </entry>
  <entry>
    <title>Spec-Driven Development With Claude, Codex, and the Superpowers Plugin</title>
    <link href="https://andreramos.dev/angular/spec-driven-development-claude-codex-superpowers/"/>
    <id>https://andreramos.dev/angular/spec-driven-development-claude-codex-superpowers/</id>
    <updated>2026-06-19T00:00:00Z</updated>
    <summary>A working model for using Claude Code, Codex, and Superpowers around a spec, so agents implement decisions instead of inventing them mid-diff.</summary>
  </entry>
  <entry>
    <title>Choosing an Angular Test Runner in 2026: Vitest, Jest, or Karma</title>
    <link href="https://andreramos.dev/angular/choosing-an-angular-test-runner/"/>
    <id>https://andreramos.dev/angular/choosing-an-angular-test-runner/</id>
    <updated>2026-06-12T00:00:00Z</updated>
    <summary>A decision map for the Angular test runner question, by where your suite actually starts, and why 'Cypress vs Vitest' is the wrong question.</summary>
  </entry>
  <entry>
    <title>NG0203: Why inject() Fails Outside an Injection Context</title>
    <link href="https://andreramos.dev/angular/angular-ng0203-inject-outside-injection-context/"/>
    <id>https://andreramos.dev/angular/angular-ng0203-inject-outside-injection-context/</id>
    <updated>2026-06-09T00:00:00Z</updated>
    <summary>Why Angular throws NG0203 when inject() runs outside an injection context, the exact window where inject() is valid, the common traps (subscribe, async route guard, class method, getter), and the fixes ranked from field initializer to runInInjectionContext.</summary>
  </entry>
  <entry>
    <title>NG0950: Reading a Required Input Before Angular Sets It</title>
    <link href="https://andreramos.dev/angular/angular-ng0950-required-input-not-set/"/>
    <id>https://andreramos.dev/angular/angular-ng0950-required-input-not-set/</id>
    <updated>2026-06-09T00:00:00Z</updated>
    <summary>Why Angular's NG0950 fires when a required signal input is read before binding, when inputs actually become available (ngOnInit, not the constructor), and the three fixes: read it in ngOnInit / computed / effect, give it a default and drop required, or bind it in the parent.</summary>
  </entry>
  <entry>
    <title>The Angular CLI MCP Server: Setup, Tools, and Wiring It to Your AI Assistant</title>
    <link href="https://andreramos.dev/angular/angular-mcp-server-setup/"/>
    <id>https://andreramos.dev/angular/angular-mcp-server-setup/</id>
    <updated>2026-06-09T00:00:00Z</updated>
    <summary>How to set up the Angular CLI MCP server: the exact start command, the client config shape, the tools it exposes, and how to wire it to Claude Code, Cursor, and VS Code.</summary>
  </entry>
  <entry>
    <title>Mocking Services and HttpClient in Angular Vitest: vi.fn, Spies, and DI</title>
    <link href="https://andreramos.dev/angular/mocking-angular-services-vitest/"/>
    <id>https://andreramos.dev/angular/mocking-angular-services-vitest/</id>
    <updated>2026-06-08T00:00:00Z</updated>
    <summary>The Jasmine-to-Vitest spy map for Angular tests (vi.fn, vi.spyOn, mockReturnValue), why a DI provider mock beats vi.mock for services, and how HttpTestingController still works with provideHttpClientTesting.</summary>
  </entry>
  <entry>
    <title>Vitest Coverage and CI for Angular: Providers, Thresholds, and the Karma Gap</title>
    <link href="https://andreramos.dev/angular/vitest-coverage-and-ci-angular/"/>
    <id>https://andreramos.dev/angular/vitest-coverage-and-ci-angular/</id>
    <updated>2026-06-08T00:00:00Z</updated>
    <summary>How coverage and CI work with the Angular Vitest builder: the ng test --coverage flag, coverageThresholds that fail the build, junit reporters for CI, and the one thing the builder does not expose that karma-coverage did.</summary>
  </entry>
  <entry>
    <title>NG0200 Circular Dependency in DI: Reading the Chain and Breaking It</title>
    <link href="https://andreramos.dev/angular/angular-ng0200-circular-dependency-di/"/>
    <id>https://andreramos.dev/angular/angular-ng0200-circular-dependency-di/</id>
    <updated>2026-06-08T00:00:00Z</updated>
    <summary>What NG0200 Circular Dependency in DI means, how to read the A -&gt; B -&gt; A chain Angular prints, the three causes that produce it (mutual services, a facade that injects its own service, a token that resolves to itself), and the fixes ranked from restructuring down to forwardRef as a last resort.</summary>
  </entry>
  <entry>
    <title>Component Testing in Angular with Vitest: TestBed, jsdom, and Browser Mode</title>
    <link href="https://andreramos.dev/angular/vitest-component-testing-angular/"/>
    <id>https://andreramos.dev/angular/vitest-component-testing-angular/</id>
    <updated>2026-06-07T00:00:00Z</updated>
    <summary>How Angular component tests actually behave under Vitest: TestBed is unchanged, the DOM is jsdom (no layout, no real CSS), and the specs that need a real browser are the ones to move to Vitest browser mode.</summary>
  </entry>
  <entry>
    <title>A CLAUDE.md for Modern Angular: Memory, Not Just Rules</title>
    <link href="https://andreramos.dev/angular/claude-md-for-modern-angular/"/>
    <id>https://andreramos.dev/angular/claude-md-for-modern-angular/</id>
    <updated>2026-06-06T00:00:00Z</updated>
    <summary>How Claude Code's memory system works for an Angular codebase: where CLAUDE.md lives, why you import AGENTS.md instead of duplicating it, and how path-scoped rules keep component, state, and testing guidance out of one file that quietly goes stale.</summary>
  </entry>
  <entry>
    <title>WebMCP Security in Angular: The Agent Calling Your Tools Can Be Hijacked</title>
    <link href="https://andreramos.dev/angular/web-mcp-security-angular/"/>
    <id>https://andreramos.dev/angular/web-mcp-security-angular/</id>
    <updated>2026-06-06T00:00:00Z</updated>
    <summary>A security guide for Angular's WebMCP: why an exposed tool acts with the user's authority, why the JSON schema is not a trust boundary, and the defenses (runtime input validation, least privilege, server-side authorization, human confirmation) before you expose anything that mutates.</summary>
  </entry>
  <entry>
    <title>NG0100 ExpressionChangedAfterItHasBeenCheckedError: Why It Surfaces in Zoneless Angular</title>
    <link href="https://andreramos.dev/angular/expressionchanged-error-zoneless-angular/"/>
    <id>https://andreramos.dev/angular/expressionchanged-error-zoneless-angular/</id>
    <updated>2026-06-06T00:00:00Z</updated>
    <summary>Why NG0100 ExpressionChangedAfterItHasBeenCheckedError surfaces after a move to zoneless or Angular 22, what it now means (a binding updated without notifying Angular), the test trap with fixture.detectChanges(), and the fixes by where the change came from.</summary>
  </entry>
  <entry>
    <title>NG0500 Hydration Node Mismatch: the Real Fix Is Not ngSkipHydration</title>
    <link href="https://andreramos.dev/angular/angular-hydration-mismatch-ng0500/"/>
    <id>https://andreramos.dev/angular/angular-hydration-mismatch-ng0500/</id>
    <updated>2026-06-06T00:00:00Z</updated>
    <summary>What NG0500 Hydration Node Mismatch means, the short list of real causes (direct DOM manipulation, invalid HTML the browser normalizes, third-party DOM libraries, HTML altered in transit), why ngSkipHydration is a tourniquet, and the fix for each.</summary>
  </entry>
  <entry>
    <title>Angular 22: What Actually Changed, and What to Do in a Production App</title>
    <link href="https://andreramos.dev/angular/angular-22-what-changed/"/>
    <id>https://andreramos.dev/angular/angular-22-what-changed/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>A senior, production-first guide to Angular 22: the OnPush default, the stabilized Signal Forms and async-signal APIs, the testing migrations, the smaller default flips that bite on upgrade, and a deliberate plan for adopting it.</summary>
  </entry>
  <entry>
    <title>Modern Angular for Production Teams</title>
    <link href="https://andreramos.dev/angular/modern-angular-production-teams/"/>
    <id>https://andreramos.dev/angular/modern-angular-production-teams/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>Three documents your team agrees on, the questions to ask before approving a modernization PR, and a way to say 'we're not adopting that yet' without sounding conservative.</summary>
  </entry>
  <entry>
    <title>Signals Without the RxJS War</title>
    <link href="https://andreramos.dev/angular/signals-without-rxjs-war/"/>
    <id>https://andreramos.dev/angular/signals-without-rxjs-war/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>A production boundary for Signals, computed values, RxJS streams, and interop, without rewriting Observable contracts just to look current.</summary>
  </entry>
  <entry>
    <title>A 30-Day Modernization Plan for Mature Angular Apps</title>
    <link href="https://andreramos.dev/angular/angular-30-day-modernization-plan/"/>
    <id>https://andreramos.dev/angular/angular-30-day-modernization-plan/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>A modernization sequence for teams that need audit, low-risk changes, isolated spikes, and decisions that can survive code review.</summary>
  </entry>
  <entry>
    <title>When to Move an Angular Test Suite to Vitest</title>
    <link href="https://andreramos.dev/angular/move-angular-test-suite-to-vitest/"/>
    <id>https://andreramos.dev/angular/move-angular-test-suite-to-vitest/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>Vitest is the Angular CLI default, but migrating an existing suite is still experimental: which specs to pilot first, what fakeAsync breaks, and how to keep CI trustworthy.</summary>
  </entry>
  <entry>
    <title>How I Would Adopt Signal Forms Now That They Are Stable in Angular 22</title>
    <link href="https://andreramos.dev/angular/signal-forms-not-my-default-yet/"/>
    <id>https://andreramos.dev/angular/signal-forms-not-my-default-yet/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>A production adoption filter for Signal Forms now that they are stable in Angular 22: use them for new forms, keep reactive forms where they already work, and migrate nothing for cosmetics.</summary>
  </entry>
  <entry>
    <title>HTTP State Without Turning Everything Into Signals</title>
    <link href="https://andreramos.dev/angular/http-state-without-signals-everywhere/"/>
    <id>https://andreramos.dev/angular/http-state-without-signals-everywhere/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>A code-heavy guide to Angular HTTP state boundaries with HttpClient, RxJS, toSignal, and the now-stable httpResource.</summary>
  </entry>
  <entry>
    <title>WebMCP in Angular: How to Expose Tools to the Browser's AI Agent (and When to Wait)</title>
    <link href="https://andreramos.dev/angular/web-mcp-in-angular/"/>
    <id>https://andreramos.dev/angular/web-mcp-in-angular/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>How Angular exposes WebMCP tools to a browser AI agent (bootstrap, routes, services, and Signal Forms), plus the security surface that opens and where I would still wait before shipping.</summary>
  </entry>
  <entry>
    <title>WebMCP vs the Angular CLI MCP Server: Runtime Tools vs Dev-Time Help</title>
    <link href="https://andreramos.dev/angular/webmcp-vs-angular-cli-mcp-server/"/>
    <id>https://andreramos.dev/angular/webmcp-vs-angular-cli-mcp-server/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>Which Angular MCP you actually want: the dev-time CLI MCP server that helps an assistant write your code, or runtime WebMCP that lets a browser agent call your shipped app.</summary>
  </entry>
  <entry>
    <title>Turning Signal Forms into AI Agent Tools</title>
    <link href="https://andreramos.dev/angular/signal-forms-as-ai-agent-tools/"/>
    <id>https://andreramos.dev/angular/signal-forms-as-ai-agent-tools/</id>
    <updated>2026-06-04T00:00:00Z</updated>
    <summary>How Angular turns a Signal Form into an agent-callable tool, what its schema inference needs from your model, and where I would use it before it leaves experimental status.</summary>
  </entry>
  <entry>
    <title>OnPush Is the Default in Angular 22: What Breaks and What to Do</title>
    <link href="https://andreramos.dev/angular/onpush-default-angular-22/"/>
    <id>https://andreramos.dev/angular/onpush-default-angular-22/</id>
    <updated>2026-06-03T00:00:00Z</updated>
    <summary>Why Angular 22 makes OnPush the default, what actually breaks (state mutated without telling Angular), the two ways to fix it, and how the migration's Eager additions double as your cleanup backlog.</summary>
  </entry>
  <entry>
    <title>Vitest Fake Timers in Angular: The Mental Model After fakeAsync</title>
    <link href="https://andreramos.dev/angular/vitest-fake-timers-vs-fakeasync-angular/"/>
    <id>https://andreramos.dev/angular/vitest-fake-timers-vs-fakeasync-angular/</id>
    <updated>2026-06-02T00:00:00Z</updated>
    <summary>How to think about Vitest fake timers in Angular after fakeAsync: the two jobs fakeAsync fused, the API map, the Angular-specific parts (effects, change detection, RxJS), and when not to use fake timers at all.</summary>
  </entry>
  <entry>
    <title>Why Your Async Validator Stays PENDING Under Vitest Fake Timers</title>
    <link href="https://andreramos.dev/angular/angular-vitest-async-validator-pending/"/>
    <id>https://andreramos.dev/angular/angular-vitest-async-validator-pending/</id>
    <updated>2026-06-02T00:00:00Z</updated>
    <summary>The silent Vitest timing failure: why an Angular async validator stays PENDING after a fakeAsync migration, why advanceTimersByTime is not enough, and the precise line between a Promise (needs the async advance) and RxJS plus HttpClient (does not).</summary>
  </entry>
  <entry>
    <title>fakeAsync and the ProxyZone Error: Fixing Angular Tests Under Vitest</title>
    <link href="https://andreramos.dev/angular/angular-vitest-fakeasync-proxyzone-error/"/>
    <id>https://andreramos.dev/angular/angular-vitest-fakeasync-proxyzone-error/</id>
    <updated>2026-06-01T00:00:00Z</updated>
    <summary>Why fakeAsync, tick, and waitForAsync throw the ProxyZone error under Angular's Vitest runner, and the two fixes: the experimental zone testing patch, or a rewrite to Vitest fake timers.</summary>
  </entry>
  <entry>
    <title>Karma to Vitest in Angular: The Config That Actually Runs</title>
    <link href="https://andreramos.dev/angular/karma-to-vitest-angular-config/"/>
    <id>https://andreramos.dev/angular/karma-to-vitest-angular-config/</id>
    <updated>2026-06-01T00:00:00Z</updated>
    <summary>What the Angular v21 Vitest test target actually is (one line), where polyfills and styles come from, the install that drops Karma, and the few options worth adding.</summary>
  </entry>
  <entry>
    <title>What to Adopt, Spike, or Wait On in Angular 21</title>
    <link href="https://andreramos.dev/angular/adopt-spike-wait-angular-21/"/>
    <id>https://andreramos.dev/angular/adopt-spike-wait-angular-21/</id>
    <updated>2026-05-30T00:00:00Z</updated>
    <summary>An adoption filter for Angular 21: what belongs in code already changing, what deserves a branch, and what should stay away from critical flows.</summary>
  </entry>
  <entry>
    <title>SSR, Hydration, and @defer Without Guesswork</title>
    <link href="https://andreramos.dev/angular/ssr-hydration-and-defer-without-guesswork/"/>
    <id>https://andreramos.dev/angular/ssr-hydration-and-defer-without-guesswork/</id>
    <updated>2026-05-26T00:00:00Z</updated>
    <summary>A practical Angular rendering guide with server routes, hydration configuration, @defer boundaries, incremental hydration, and browser-only DOM safeguards.</summary>
  </entry>
  <entry>
    <title>An AGENTS.md That Makes AI Write Modern Angular</title>
    <link href="https://andreramos.dev/angular/agents-md-for-modern-angular/"/>
    <id>https://andreramos.dev/angular/agents-md-for-modern-angular/</id>
    <updated>2026-05-25T00:00:00Z</updated>
    <summary>A production guide to writing an Angular agent rules file (AGENTS.md) that names the version, the Signals/RxJS boundary, the template syntax, and the traps that make AI write stale code.</summary>
  </entry>
  <entry>
    <title>The Code That Breaks When Angular Goes Zoneless</title>
    <link href="https://andreramos.dev/angular/code-that-breaks-when-angular-goes-zoneless/"/>
    <id>https://andreramos.dev/angular/code-that-breaks-when-angular-goes-zoneless/</id>
    <updated>2026-05-24T00:00:00Z</updated>
    <summary>A code-heavy review guide for timers, subscriptions, forms, third-party callbacks, and tests before a zoneless Angular spike.</summary>
  </entry>
  <entry>
    <title>Strategy Pattern in Angular: Swapping Rules Without Spreading Switches</title>
    <link href="https://andreramos.dev/angular/strategy-pattern-in-angular/"/>
    <id>https://andreramos.dev/angular/strategy-pattern-in-angular/</id>
    <updated>2026-05-23T00:00:00Z</updated>
    <summary>A production Angular guide to the Strategy Pattern: when a switch becomes a boundary, how to select implementations with DI, and how to keep the pattern from becoming decorative indirection.</summary>
  </entry>
  <entry>
    <title>Adapter Pattern in Angular: Isolating APIs and Browser-Only Libraries</title>
    <link href="https://andreramos.dev/angular/adapter-pattern-in-angular/"/>
    <id>https://andreramos.dev/angular/adapter-pattern-in-angular/</id>
    <updated>2026-05-22T00:00:00Z</updated>
    <summary>A production Angular guide to the Adapter Pattern: where to translate external contracts, how to keep components clean, and when a wrapper is not worth creating.</summary>
  </entry>
  <entry>
    <title>Facade Pattern in Angular: When Components Know Too Much</title>
    <link href="https://andreramos.dev/angular/facade-pattern-in-angular/"/>
    <id>https://andreramos.dev/angular/facade-pattern-in-angular/</id>
    <updated>2026-05-21T00:00:00Z</updated>
    <summary>A production Angular guide to the Facade Pattern: when to create one, what it should own, what it should not hide, and how to test the boundary.</summary>
  </entry>
  <entry>
    <title>A Small Checklist Before Trying Zoneless</title>
    <link href="https://andreramos.dev/angular/zoneless-checklist/"/>
    <id>https://andreramos.dev/angular/zoneless-checklist/</id>
    <updated>2026-05-20T00:00:00Z</updated>
    <summary>A readiness checklist for testing zoneless Angular in an existing app without confusing a compatibility spike with a rollout.</summary>
  </entry>
  <entry>
    <title>Angular CLI MCP and AI-Generated Angular Code</title>
    <link href="https://andreramos.dev/angular/angular-cli-mcp-ai-generated-angular-code/"/>
    <id>https://andreramos.dev/angular/angular-cli-mcp-ai-generated-angular-code/</id>
    <updated>2026-05-17T00:00:00Z</updated>
    <summary>A production checklist for using Angular CLI MCP, ai-config, and human review around AI-generated Angular code.</summary>
  </entry>
  <entry>
    <title>Control Flow Is Not Just Cleaner Syntax</title>
    <link href="https://andreramos.dev/angular/control-flow-not-just-cleaner-syntax/"/>
    <id>https://andreramos.dev/angular/control-flow-not-just-cleaner-syntax/</id>
    <updated>2026-05-16T00:00:00Z</updated>
    <summary>A production review lens for Angular control flow: when to migrate touched templates, how to choose `track`, and where `@switch` helps state modeling.</summary>
  </entry>
  <entry>
    <title>Standalone Without Turning NgModules Into a Villain</title>
    <link href="https://andreramos.dev/angular/standalone-without-ngmodule-dogma/"/>
    <id>https://andreramos.dev/angular/standalone-without-ngmodule-dogma/</id>
    <updated>2026-05-15T00:00:00Z</updated>
    <summary>A practical rule for using standalone components, route providers, and remaining NgModules in mature Angular applications.</summary>
  </entry>
</feed>
