Rescue a Legacy Angular Monolith Without a Rewrite: Layer Nx, ESLint, Bundle Budgets, and CI Checks While You Keep Shipping

You need safety before upgrades

Before you adopt Signals or refactor change detection, make the platform safe. Nx adds task orchestration, dependency graphs, and fast affected builds. ESLint stops high-risk patterns. Budgets turn size drift into a visible failure. These are low-risk changes with immediate benefits.

• Nx gives structure without moving code day one

• Linting catches rot in PRs

• Budgets prevent silent bundle creep

Measurable outcomes leadership understands

When I show a director we cut main.js 18% and brought CI from 32m to 11m with Nx caching, the buy-in for the next phase (Angular 20+, SignalStore) becomes trivial. We log and surface metrics on every PR to make rigor obvious.

• Bundle size delta per PR

• CI wall time and cache hit rate

• Defect reproduction speed

1) Initialize Nx in place (no code moves)

We add Nx around the existing Angular CLI project. No folder moves yet; keep dev velocity. Nx provides affected commands and a dep graph immediately.

• Create a rollback tag

• Install Nx and scan the workspace

• Keep the CLI structure initially

Commands

# from the repo root
git checkout -b chore/nx-bootstrap
npm i -D nx @nrwl/workspace
npx nx init  # or: npx nx@latest init
# Optionally enable Nx Cloud for CI cache
npx nx connect-to-nx-cloud

2) Tag modules and enforce boundaries gradually

Add tags in project.json and a basic module-boundaries rule. We only block the worst cross-imports first (e.g., features importing features).

• Start with tags: scope:feature, type:ui/data-access/util

• Turn on only the boundary rule

• Auto-fix imports later

Module boundary config

{
  "rules": {
    "@nx/enforce-module-boundaries": [
      "error",
      {
        "enforceBuildableLibDependency": true,
        "allow": [],
        "depConstraints": [
          { "sourceTag": "type:feature", "onlyDependOnLibsWithTags": ["type:ui","type:data-access","type:util"] },
          { "sourceTag": "type:ui", "onlyDependOnLibsWithTags": ["type:util"] }
        ]
      }
    ]
  }
}

3) Add ESLint with incremental strictness

Angular ESLint replaces TSLint and gives us template and TS checks. We begin with warnings, then fail PRs for new files while we chip away at legacy directories.

• Start permissive, fail only on new code

• Promote rules week-by-week

• Target hot paths first

ESLint setup (Angular + Nx)

npm i -D eslint @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
npx ng g @angular-eslint/schematics:convert-tslint-to-eslint

// .eslintrc.json (excerpt)
{
  "extends": ["plugin:@angular-eslint/recommended"],
  "rules": {
    "@angular-eslint/no-host-metadata-property": "warn",
    "@typescript-eslint/no-floating-promises": "warn"
  },
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}

4) Set bundle budgets to stop bloat now

Budgets turn invisible size creep into an objective gate. We start slightly above current size, then ratchet down after wins (dead-code elim, split chunks).

• Budget initial JS and CSS

• Budget lazy chunks by feature

• Fail CI if exceeded

Budgets in angular.json

"configurations": {
  "production": {
    "budgets": [
      { "type": "initial", "maximumWarning": "1.8MB", "maximumError": "2MB" },
      { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" },
      { "type": "bundle", "name": "main", "maximumWarning": "700kb", "maximumError": "850kb" }
    ]
  }
}

5) Wire CI with affected, caching, and budget gates

This keeps PRs under 10–12 minutes even for large repos. We surface artifacts (size reports) back to the PR for visibility.

• GitHub Actions shown; Jenkins/Azure DevOps similar

• Cache node_modules + Nx artifacts

• Fail fast on lint/test/budgets

GitHub Actions (excerpt)

name: ci
on:
  pull_request:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - name: Install
        run: npm ci
      - name: Nx cache
        uses: nrwl/nx-set-shas@v4
      - name: Lint affected
        run: npx nx affected -t lint --parallel=3
      - name: Test affected
        run: npx nx affected -t test --parallel=3 --code-coverage
      - name: Build affected
        run: npx nx affected -t build --configuration=production --parallel=2

6) Add a tiny library seam only where you touch code

We don’t split the monolith on day one. Each time a PR touches a feature, we pull common code into a proper lib. Devs see the pattern, velocity continues, architecture trends better over weeks—not all at once.

• Create libs opportunistically (ui, data-access)

• Keep feature modules intact initially

• Migrate imports as files change

7) Instrument the upgrade runway (Signals ready)

Once budgets and CI are stable, we introduce Angular 20+ Signals in isolated features. We’ve used SignalStore with PrimeNG in production dashboards to cut unnecessary renders without jank, but only after delivery is safe.

• Guardrails first, then Signals/SignalStore

• Track render counts and INP in CI

• Feature-flag risky changes

Before

Developers were guessing at impact. Some PRs worsened performance without anyone noticing until after a release.

• 32m CI wall clock (cold)

• Main bundle 2.1 MB; lazy chunks untamed

• Intermittent test flakiness

After (2 weeks)

We didn’t stop shipping. We added Nx, ESLint, budgets, and CI gates. Release risk dropped immediately. With guardrails in place, we scheduled a measured Angular 14 → 20 upgrade and later added SignalStore to hot components.

• 11m CI with Nx caching (4–6m warm)

• Main bundle -18% (2.1MB → 1.72MB)

• Lazy chunk budgets flagged regressions early

Tooling notes

We visualize size and Web Vitals trends over time. Directors see the slope improve, not just a one-off number.

• Angular DevTools for render counts

• Lighthouse CI snapshots in PRs

• GA4/BigQuery for Core Web Vitals

Signs you’re ready

If this sounds familiar, bring in a senior Angular consultant for 2–4 weeks to implement guardrails and establish a measurable baseline. It’s the fastest, least disruptive way to stabilize delivery and prepare for larger upgrades.

• Multiple teams touching the same monolith with inconsistent patterns

• CI times >20 minutes or flaky tests block merges

• Bundle creep with no one accountable

• Directors ask for Angular 20+ but fear downtime

Engagement snapshot

I typically deliver an assessment within a week and open the first guarded PR before the next sprint begins. Remote, GitHub Actions/Jenkins/Azure DevOps supported.

• Discovery and repo assessment (1–2 days)

• Nx/ESLint/budgets/CI wiring (3–5 days)

• Pilot PR and coaching (2–3 days)

Strictness you can turn on safely

// tsconfig.json (incremental strictness)
{
  "compilerOptions": {
    "strict": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true
  }
}

Budgeting a heavy feature route

{ "type": "bundle", "name": "feature-analytics", "maximumWarning": "400kb", "maximumError": "520kb" }

A tiny util lib seam

npx nx g @nx/angular:library util-format --directory=shared --simpleModuleName

// shared/util-format/src/lib/bytes.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'bytes' })
export class BytesPipe implements PipeTransform {
  transform(v?: number): string { return v == null ? '-' : `${(v/1024/1024).toFixed(2)} MB`; }
}

Key points

• Wrap first, refactor later: Nx, ESLint, budgets, CI

• Measure everything: size deltas, CI time, Web Vitals

• Adopt Signals/SignalStore once the platform is safe

What to instrument next

With guardrails in place, layer in advanced checks. On my products (gitPlumbers 99.98% uptime, IntegrityLens 12k+ interviews, SageStepper +28% score lift), the same pattern proved itself across industries.

• Conventional Commits + release notes automation

• Cypress smoke on critical flows

• SSR or hydration timing on key routes