How to Upgrade Angular Packages

By

The following guide will show you how to update packages in an Angular project and enable the Ivy compiler.

Auto Upgrade

You may be able to update your project using the ng update command.

command line
npm i -g @angular/cli@latest
ng update

If you would like to install bleeding-edge Angular packages, use the manual upgrade commands below.

Manual Upgrade

You can manually upgrade Angular’s most common packges using the commands below. Keep in mind, you many need to add additional packages based on what exists in your package.json. The commands below use the @next tag, which will upgrade to the latest beta or rc versions of Angular. Change this tag to @latest for the latest stable version.

command line
npm i -g @angular/cli@next

# depencencies
npm i @angular/{common,compiler,forms,platform-browser,platform-browser-dynamic,platform-server,router}@next 
npm i rxjs core-js zone.js


# devDependencies
npm i @angular-devkit/build-angular@next @angular/{compiler-cli,cli,language-service}@next -D

Enabling Ivy

Refer to the official Angular Ivy guide if you run into issues.

Update your root tsconfig.

file_type_typescript tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    // ...
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "allowEmptyCodegenFiles": true
  }
}

Update the angular CLI config.

angular.json
{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}

Add this script to your package.json.

file_type_npm package.json
{
  "scripts": {
    ...
    "postinstall": "ivy-ngcc"
  }
}

Lastly, run npm install to run this script. When you serve or build your app it should now be in ivy mode. You should see a noticeable decrease in the total bundle size.

Q&A Chat