How to Upgrade Angular Packages

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.

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 packages 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.

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.

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

Update the angular CLI config.

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

Add this script to your 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.