Keeping your Angular CLI project up to date

In this brief post, I'm going to cover the various reasons why you should keep your Angular project up to date with the latest releases. First, we need to understand how Angular is versioned and updates are released.

Versioning

Angular follows the semantic versioning scheme (semver). This means that with the version number we can determine the kind of changes to expect. Semver can be broken down into the following:

// 5.2.0
// breaking-changes.features.bug-fixes

The first number is updated whenever there is a breaking change to the code. The major version update typically includes any public API changes that would cause you to have to update your application code. The second number is used to release new revisions for things such as features or new APIs. The last number is used for denoting bug fixes, patches, and security fixes.

Angular as a project schedules major releases every six months. That may sound like a lot but remember any public API change is a breaking change. A simple rename of a public class method to make it more understandable would be a breaking change. Angular is committed to following semver to make it easier to manage to update and batching breaking changes together. By following semver updates are more predictable. You can find the release changelog here.

Why upgrade?

Angular has many features such as TypeScript and Ahead of Time Compiling (AOT) that help catch errors in our application at build time. TypeScript makes it easier to find bugs with static typing and AOT catches many common mistakes in our HTML templates. The Angular team is continuously improving these build tools to be faster and catch more bugs at build time. It's not uncommon to upgrade an Angular project without any breaking changes. Often the new version finds application level bugs that previously went unnoticed.

Not only does the compiler for Angular get better with each version but the performance does as well. Because of Angular abstracts away, the DOM APIs and has an AOT compiler the team is free to make as many changes and optimizations as needed without having to change the public APIs. These abstractions allow Angular to improve performance without any breaking changes. Past improvements have decreased JS bundles size and runtime performance dramatically.

We get all of these significant benefits, and we haven't even mentioned new features! The Angular team and community are continually improving the ecosystem to make it easier to build web apps. Recent releases have included features such as Service Worker Support for Progressive Web Apps (PWA) as well as Universal Server-Side Rendering (SSR) support in the Angular CLI.

How to upgrade?

The Angular CLI has become the standard way to create, build and deploy Angular applications. The Angular CLI is a fantastic command line tool that makes Angular development a breeze. The CLI abstracts away any underlying build systems with just a few commands. Why is this important? Well by making the build system a black box the CLI team can also make improvements to the CLI without breaking changes. These improvements often include faster build times and smaller/ quicker Angular apps.

By using the CLI, you get all of these benefits for free when updating your project to the latest Angular and Angular CLI. You don't need to worry abouthow to build your app or the best practices to get the optimal build. All you need to remember is a few commands like ng build.

Currently, there is no automatic tooling to upgrade an Angular CLI project just yet. The upgrade process though is relatively easy with a handful of steps.

1. Upgrade your global CLI installation npm install -g @angular/cli.

2. Create a new Angular app with the command ng new demo-app.

3. Once created make sure your existing project has any changes committed to source control.

4. Copy the configuration files and package.json from the new demo-app into your existing CLI project. Once copied over you can use git to compare the file changes to determine what updates you would like to apply to your project.

5. Typically changes are version number updates and sometimes minor config file adjustments. Once all copied over and determine your changes, you need run npm install to install the latest packages. Finally, build the project with ng build.

On a large team, it can help to have a dev or two volunteers to update the project or have an update schedule occasionally. I typically upgrade my Angular projects every month or two. Updating often keeps any changes minor, and I get all the significant benefits we discussed above. Angular is constantly improving. Taking the time to upgrade your app can get you many significant benefits for free thanks to all the fantastic hard work of the Angular team and community.