Angular 18 Upgrade Guide

Version before the update:

• Angular: 17.3
• Node.js: 18.8

Install Node.js LTS

• Download Node.js 20.17.0
• Install on the machine

Install Latest Angular

npm i -g @angular/cli@latest

ng version

Angular CLI: 18.2.4 (this number may not update right away)
Node: 20.17.0
Package Manager: npm 8.6.0

Update Dependencies

ng update

    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       17.3.0 -> 18.2.4         ng update @angular/cdk
      @angular/cli                       17.3.0 -> 18.2.4         ng update @angular/cli
      @angular/core                      17.3.0 -> 18.2.4         ng update @angular/core
      @angular/material                  17.3.0 -> 18.2.4         ng update @angular/material

    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.

Update CLI

ng update @nagular/cli

This will update the angular.json file as well as most of the Angular packages in package.json and package-lock.json.

If issues appear in the app.module.ts around tslib, do the following:

• Install latest TypeScript npm i -g typescript
• Remove tslib from the package.json file
• Install latest tslib: npm i tslib --save-dev
• Run to build to test if everything is still working

To continue upgrading you need to commit the changes.

Update Material

To update the remaining dependencies (Angular CDK & Angular material) run the following:

ng update @angular/material

This should work without breaking changes.

Now run the project (ng serve) to make sure that everything is working as expected.

Once again commit the changes and you're done.