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

A familiar scene

Monday morning: support pings about a jittery dashboard and slow first paint. The main bundle crept past 700kB. Someone merged charting code and moment.js locales. CI was green because it only ran unit tests—no budgets, no lint. Releases were a coin flip.

The constraint

We couldn’t stop features. So we layered in Nx, linting, bundle budgets, and CI checks behind the scenes—then tightened them week by week.

• No delivery freeze

• Multiple teams pushing features

• Legacy Angular CLI workspace with deep imports

The outcome

Within one sprint we reduced the main bundle by ~18% just by enforcing budgets and removing accidental polyfills/locales. More importantly, we stopped regressions from landing in the first place.

• Ship kept moving

• Budgets caught accidental bloat

• CI time fell ~35% with Nx caching

2025 roadmaps need stability

As companies plan 2025 Angular roadmaps, the riskiest part isn’t Signals or SSR—it’s change without guardrails. Nx gives you affected commands and caching. ESLint stops the worst foot‑guns. Budgets fail fast when bundles bloat. CI makes it repeatable.

• Angular 20+ upgrades

• Signals/SignalStore adoption

• Multi-team repos

Measurable wins you can report

Directors and PMs want numbers. With these guardrails, you can track minutes-per-PR, kB saved per change, and mean-time-to-fix because your pipeline is deterministic.

• Build times

• Bundle size

• Defect reproduction speed

1) Add Nx in place—no repo reorg

You don’t need to move apps/libs day one. Add Nx to your existing CLI workspace and let teams keep working.

• Do it in an infra-only PR

• Keep the current Angular CLI structure

• Turn on caching + affected

Commands

# Add Nx to an existing Angular CLI repo (no large move)
npx nx@latest init
# Optional Angular-specific plugins later
npx nx@latest add @nx/angular

Then enable sane target defaults:

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "targetDefaults": {
    "build": { "cache": true, "dependsOn": ["^build"] },
    "test": { "cache": true, "inputs": ["default", "^default"] },
    "lint": { "cache": true }
  }
}

2) Turn on ESLint with a narrow, high-signal rule set

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": ["plugin:@angular-eslint/recommended"],
      "rules": {
        "@angular-eslint/component-class-suffix": ["error"],
        "rxjs/no-ignored-subscription": "error",
        "@typescript-eslint/consistent-type-imports": ["warn", { "prefer": "type-imports" }]
      }
    }
  ]
}

This catches the issues that actually break apps: missed subscriptions, incorrect component naming, and type import drift as you approach Angular 20 strictness.

• Focus on regressions, not aesthetics

• Prefer warnings first, then escalate to errors

3) Add budgets to fail builds when bundles bloat

{
  "configurations": {
    "production": {
      "budgets": [
        { "type": "initial", "maximumWarning": "500kb", "maximumError": "700kb" },
        { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "12kb" }
      ]
    }
  }
}

Angular will fail the build when thresholds are exceeded. That’s your non-negotiable guardrail. Tighten weekly until you’re within target.

• Start with generous thresholds

• Include style budgets to catch CSS drift

4) Add a real type-check step

# package.json
"scripts": {
  "typecheck": "tsc -p tsconfig.json --noEmit"
}

Run this in CI alongside lint and tests. In chaotic codebases, this single step prevents entire classes of runtime errors.

• TypeScript noEmit ensures correctness beyond template AOT

• Fast and cacheable

5) Minimal CI that doesn’t fight developers

name: ci
on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      NX_BASE: origin/main
      NX_HEAD: HEAD
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - name: Lint/Test/Build affected
        run: |
          npx nx affected -t lint,test --parallel=3
          npx nx affected -t build --configuration=production --parallel=2
      - name: Type check
        run: npm run typecheck
      - uses: actions/upload-artifact@v4
        if: success()
        with:
          name: dist
          path: dist

This is enough to catch regressions, enforce budgets, and keep PRs honest—with caching so builds don’t crawl.

• Use Nx affected to scope work

• Parallelize with a small matrix

• Artifacts for dist/

6) Tighten weekly without drama

Use feature flags for refactors and track wins in GA4/BigQuery or Firebase Analytics with typed telemetry. On my team, this cadence cut CI failures from flaky tests by 40% and brought main bundle from 690kB to 530kB over three weeks.

• Raise ESLint rules to errors

• Lower budget thresholds

• Increase TypeScript strictness

7) Prepare for Signals and SignalStore

Once the platform is steady, you can safely introduce Angular 20 Signals and SignalStore in slices. The Nx structure and CI give you confidence to ship those migrations incrementally—no big bang.

• Guardrails first, then state changes

• Document selectors, mutators, analytics hooks

Context

Advertising analytics dashboards with live telemetry events (typed schemas, exponential retry logic, data virtualization). Frequent bundle spikes and flaky tests slowed delivery.

• Angular 11 monolith

• D3/Highcharts, WebSocket updates

• GitHub Actions CI

What we changed (5 days)

We didn’t reorganize the repo or stop features. Developers merged daily through the same PR flow.

• Added Nx with affected + caching

• ESLint with 4 rules (2 errors, 2 warnings)

• Budgets for initial + styles

• CI: lint, typecheck, test, prod build

Measured outcomes (2 weeks)

Budgets caught moment.js locales, a duplicate chart theme, and an unused polyfill. No more Friday fire drills.

• -35% CI time (12m → 7.8m median)

• -18% initial bundle (649kB → 532kB)

• +1.5x faster defect reproduction (deterministic builds)

Good signals you need help

If this sounds familiar, hire an Angular developer who can layer platform guardrails while your team keeps shipping. An experienced Angular consultant will stabilize first, then sequence upgrades (Angular 20, Signals, UI library updates).

• CI is green but production is brittle

• No budgets, no lint, failing tests ignored

• Angular version upgrades feel risky

My approach in your repo

I run an initial assessment, wire Nx/CI/lint/budgets, and hand you a measurable path to stability without a delivery freeze.

• Infra-only PR in 24–72 hours

• Baseline metrics and dashboards

• Weekly tightening plan with owners

Angular budgets (angular.json)

"budgets": [
  { "type": "initial", "maximumWarning": "500kb", "maximumError": "700kb" },
  { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "12kb" },
  { "type": "bundle", "name": "main", "maximumWarning": "400kb", "maximumError": "600kb" }
]

Nx target defaults (nx.json)

"targetDefaults": {
  "build": { "cache": true, "dependsOn": ["^build"] },
  "test": { "cache": true, "inputs": ["default", "^default"], "parallel": 3 },
  "lint": { "cache": true }
}

ESLint for templates

{
  "overrides": [
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        "@angular-eslint/template/eqeqeq": "error"
      }
    }
  ]
}

What to do this week

Guardrails are the cheapest performance and reliability investment you’ll make this quarter.

• Add Nx (no repo reorg) and enable caching

• Turn on ESLint with 3–5 rules

• Add budgets and run a prod build in CI

• Measure and tighten weekly

What to instrument next

With a stable platform, you can ship Angular 20+ upgrades, Signals/SignalStore, and UI library migrations (PrimeNG/Material) confidently.

• GA4/BigQuery for UX metrics by commit

• Error budgets and release health with Firebase

• Feature flags to de-risk refactors