DEV Community

Cover image for Keeping Your Angular App Up-to-Date: A Practical Guide
Priya Khanna
Priya Khanna

Posted on

Keeping Your Angular App Up-to-Date: A Practical Guide

Upgrading an existing Angular project to the latest stable release sounds daunting, but with the right approach and the power of the Angular CLI, you can move from Angular X to Angular Y in just a few steps—without breaking your build or losing sleep. As a TypeScript-loving Angular dev.

  1. Check Your Current Versions

ng version

Make note of:

  1. Angular CLI version
  2. Framework packages (@angular/core, @angular/cli, etc.)

  3. TypeScript version

  4. Update the Angular CLI Globally
    Always start by syncing your global CLI to the latest stable:

npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli@latest
Enter fullscreen mode Exit fullscreen mode
  1. Update Your Local CLI & Core Packages

Inside your project directory, run:

ng update @angular/cli @angular/core --allow-dirty

• The CLI will analyze your package.json and suggest peer-dependency updates.
• It applies automatic code migrations (e.g., RxJS imports, template syntax changes).

Tip: If you’ve made local changes to configuration files (like angular.json), remove --allow-dirty and commit/ stash first.

  1. Address Peer Dependencies

After the core update, you might see warnings for libraries like:
• @angular/material
• @ngrx/store
• Third-party modules

Upgrade them individually:

ng update @angular/material
ng update @ngrx/store
Enter fullscreen mode Exit fullscreen mode

Or use npm outdated and bump versions manually in package.json, then:

npm install

  1. Upgrade TypeScript & RxJS

Angular’s latest often requires new TypeScript:

npm install typescript@~5.1 rxjs@~7.8

Double-check tsconfig.json for any deprecated compiler flags (e.g., useDefineForClassFields).

  1. Run & Fix Compiler Errors

ng serve

• Look for template errors (binding syntax, removed APIs).
• Update imports that moved packages (e.g., import { mergeMap } from 'rxjs/operators').
• Refactor any deprecated lifecycle hooks (e.g., replace ngOnChanges patterns).
Enter fullscreen mode Exit fullscreen mode
  1. Verify E2E & Unit Tests 
ng test
ng e2e
Enter fullscreen mode Exit fullscreen mode 
• Update any test setup for TestBed.configureTestingModule changes.
• Adjust mock modules if the testing API surface changed.
Enter fullscreen mode Exit fullscreen mode
  1. Lint & Format

If you use ESLint:

npm install eslint@latest @angular-eslint/schematics@latest --save-dev
ng g @angular-eslint/schematics:convert-tslint-to-eslint
ng lint
Enter fullscreen mode Exit fullscreen mode

Fix any new lint errors from updated rules.

  1. Performance & Bundle Check 
ng build --prod --stats-json
npx webpack-bundle-analyzer dist/stats.json
Enter fullscreen mode Exit fullscreen mode 
• Identify any large vendor chunks.
• Lazy-load new feature modules if bundle size spikes.
Enter fullscreen mode Exit fullscreen mode

  1. Final QA & Deploy

    • Smoke-test critical flows in staging.
    • Validate in multiple browsers.
    • Deploy with confidence!

Pro Tips for a Seamless Upgrade
• Branch early: Always perform updates on a dedicated Git branch.
• Commit after each major step: Isolate changes so you can revert if needed.
• Read the Changelog: Angular’s update guide (update.angular.io) highlights breaking changes.
• Automate: Incorporate ng update into your CI for minor patch updates.

Upgrading doesn’t have to be a headache—embrace the CLI, follow structured steps, and keep your Angular app running on the cutting edge. 🚀

Top comments (0)