Project Name
How 8 AI Agents Rebuilt a Live Web App from AngularJS to Angular, Zero Downtime
The client runs an enterprise SaaS platform that HR and compliance teams use to manage screening and onboarding workflows. The application is deployed across test, staging, and production environments, with standalone usage plus embedded integrations inside Salesforce. Over the years, the AngularJS codebase grew to more than 1,300 source files and roughly 80 shared services too large and too live for a big-bang rewrite. Leadership needed to retire the end-of-life AngularJS stack to meet SOC 2 obligations, but pausing the product for a complete rewrite was not an option: the application processes workflows every day, and every screen had to keep behaving exactly as before.
- SOC 2 blocked by an unpatchable dependency footprint: AngularJS 1.8.2 receives no security fixes, and 27 libraries were vendored directly into the codebase, most frozen since 2017–2019, six carrying local modifications. Vendored, forked code is invisible to dependency scanners and cannot be fixed by upgrading.
- Zero tolerance for visible change: The application is live and in continuous use; even quietly fixing an old bug would be an unreviewed production change that risks user trust.
- No automated safety net: There were no automated tests, so nothing could prove a rebuilt screen behaved exactly like the original, and regression risk was impossible to measure.
- Hidden coupling at scale: Screens shared state through $rootScope events, $watch hooks, and global HTTP interceptors that a file-by-file code read would miss entirely.
- Authentication could not regress: Token refresh, CDN headers, and SameSite/Secure cookie handling — including Safari and embedded iframe sessions — had to survive unchanged.
- Parallel work and repeated mistakes: Engineers working in parallel created duplicate bridges and broken builds, and the same review comments kept recurring across screens.
Ksolves ran the migration as a multi-agent, agentic AI production line built on Claude Code: eight agents, each scoped to one job and one set of permissions, following ten reusable skill playbooks and a shared rulebook (CLAUDE.md). The governing principle: the agent that writes the code is never the agent that judges it. Every screen goes through the same nine-step pipeline with three hard gates.
- Dependency retirement built into every screen: Each rebuilt screen moves off vendored libraries onto npm-managed packages on Angular 21 (e.g., @ng-select/ng-select and ngx-mask) that scanners can see and upgrades can patch. AngularJS and the remaining vendored code are deleted at the final cutover.
- Hybrid runtime, one router: Using angular/upgrade, rebuilt screens mount at their original routes through downgradeComponent() while the legacy router stays in control until a single switch-over. This enables gradual migration with zero downtime.
- Behavior frozen before code changes: The generate-e2e-baseline skill drives a real browser through Playwright MCP to record how the legacy screen behaves. It must pass on the old screen first; the same check is then rerun on the new one to prove parity.
- Read-only research and inspection: The auditor maps every dependency of a screen and runs an adversarial second pass; the verifier and diff-mapper compare old and new code branch by branch. None can edit code, so none can quietly "fix" what they find.
- Authentication rebuilt natively: Auth logic was migrated directly into Angular rather than bridged, with its own verification rounds, because it was too risky to run through an adapter.
- A rulebook that learns: Recurring review comments became numbered rules in CLAUDE.md. Two reviewer agents check every change against them, and rebase + ng build + ng lint is a hard gate before any pull request.
TECHNOLOGY STACK
| CATEGORY | TECHNOLOGY |
|---|---|
| Frontend | Angular 21 + @angular/upgrade |
| AI/ML | Claude Code (multi-agent) |
| Methodology | Playwright MCP |
| Integration | Typed bridge services |
| Security | npm-managed dependencies |
| DevSecOps | ng build/ng lint + agents |
- A path to SOC 2 remediation, screen by screen: Before: end-of-life AngularJS 1.8.2 plus 27 vendored libraries with no upgrade path. After: ~39 screens rebuilt on Angular 21 in 11 weeks on scanner-visible npm packages; the old stack is removed at final cutover.
- Zero downtime across 3,000+ commits: Before: a rewrite this size would normally require a code freeze or big-bang release. After: 3,000+ commits shipped into the live application over 11 weeks, with no freeze and no maintenance window.
- Automated behavioral parity where there was none: Before: zero automated tests and no way to prove equivalence. After: every migrated screen must match a behavior baseline recorded on the legacy version before merge.
- Three gates and two human sign-offs per screen: Before: quality depended on reviewer memory and bandwidth. After: each screen passes 3 automated gates and 2 human approvals before a pull request is opened.
- Repeat defects caught before review: Before: the same review comments recurred across screens. After: 2 reviewer agents enforce them as numbered rules: e.g., index-based list tracking, effect() for derived state, and build-time duplicates.
An enterprise HR SaaS platform stuck on end-of-life AngularJS was blocked from SOC 2 compliance and unable to ship new features without risk. Ksolves built a governed multi-agent pipeline that migrated 39 screens and 3,000+ commits to Angular 21 over 11 weeks with zero downtime and zero unreviewed changes. Every rebuilt screen is proven equivalent before merge; every agent’s work is inspected by a different agent; every human decision is logged. The platform now moves at agile velocity without migration risk, and the same agents, skills, and rulebook carry the remaining migration and apply to future legacy projects.
Stuck on an end-of-life frontend that is blocking compliance? Explore our AI/ML Services.
