Verify Angular changes

Checks Angular templates, focused behavior tests and real browser flows before describing a change as complete.

angular-verification

Team members using this skill

AgentIona

See how it helps

When is it useful?

Use when an Angular implementation needs evidence beyond a successful TypeScript check.

What does it help you do?

Runs actual project build, template and lint commands relevant to the change.
Tests component behavior, HTTP contracts, cancellation and error recovery.
Exercises routes, responsive layouts and keyboard use while recording skipped checks honestly.

Try asking this

Verify our edited order screen through direct links, server validation errors, Back navigation and phone-width keyboard interactions. Submit an invalid order from a narrow viewport, fix it and return to the list. Report the actual browser result alongside build and test output.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Angular Verification & Browser QA

Prove that an Angular change compiles with strict template checking, passes targeted automated tests, and behaves properly in the browser across states and routes before calling it done.

1. Template typecheck, lint and build verification

Run the project's actual scripts from package.json / angular.json:
- Typecheck & template check: run ng build --configuration development or tsc --noEmit / ngc (as configured) so Angular's template compiler (strictTemplates) validates component bindings, pipes, directives and signal/observable types.
- Lint: run ng lint / eslint and fix every error or warning in touched files.
- Build: run the build script when changing lazy-loaded routes, standalone imports, providers, SSR config or bundle assets.

2. Targeted component, service and RxJS tests

Test observable behavior rather than private fields:
- For components: use TestBed.configureTestingModule, ComponentFixture or TestbedHarnessEnvironment (ComponentHarness), trigger inputs and DOM events, call fixture.detectChanges(), and assert on rendered DOM and emitted outputs.
- For HTTP services and interceptors: use provideHttpClient() + provideHttpClientTesting() and HttpTestingController (expectOne, flush, verify()), asserting request method, URL, params, headers and error paths.
- For RxJS streams and timers: test cancellation, debounce and error recovery deterministically (fakeAsync/tick, marble tests or controlled subjects).

3. Browser, route and interaction check

Whenever browser or preview tools are available, verify the changed flow in a real browser:
- States: initial load, loading indicator, empty state, client & server validation errors, retry and success.
- Navigation: direct URL load, browser Back/Forward, reload and same-component route parameter changes.
- Console & network: verify zero Angular runtime errors (NG0100, NG0200, NG0950), unhandled rejections, or duplicate HTTP calls.
- Responsive & keyboard: check phone, tablet and desktop widths, keyboard navigation (Tab, Enter, Escape) and visible focus.

4. Honest handoff

Record the exact commands, tests, routes and states verified and any environment limits, along with clear reproduction and testing steps for the reviewer or tester.

Before you finish

Angular build/template typecheck, linter and targeted tests ran and passed.
No Angular runtime errors (NG*), console errors or duplicate HTTP calls in the changed flow.
Loading, empty, error, navigation and form states verified.
Verification steps and remaining environment limits documented for the tester.

Included files 2

LICENSE.txt
SKILL.md