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.
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 changed whenever there is a breaking change to the code. This typically includes any public API changes that would cause you to have to update your own application code. The second number is used to release new changes 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 a 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 updating and batching breaking changes together so upgrading is predictable. You can find the release change log here.
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 catch bugs with static typing and AOT catches many common mistakes in our HTML templates. The Angular team is constantly improving these build tools to be faster and catch more bugs at build time. Its not uncommon to upgrade a Angular project without any breaking changes. Often the new version catches 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 Angular abstracts away the DOM APIs and has a AOT compiler the team is free to make as many changes and optimizations as needed without having to change the public APIs. This allows Angular to improve performance without any breaking changes. Past improvements have decreased JS bundles size and runtime performance dramatically.
We get all of these great benefits and we haven’t even mentioned new features! The Angular team and community is constantly 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/faster 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 about how to build your app or the best practices to get the optimal build. All you need to remember is a few commands like
Currently there is no automatic tooling to upgrade a Angular CLI project just yet. The upgrade process though is relatively easy with a handful of steps.
Upgrade your global CLI installation
npm install -g @angular/cli.
Create a new Angular app with the command
ng new demo-app.
Once created make sure your existing project has any changes committed to source control.
Copy over the configuration files and
package.jsonfrom the new
demo-appinto 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.
Typically changes are version number updates and sometime minor config file adjustments. Once all copied over and determine your changes you need run
npm installto install the latest packages. Finally build the project with
On a large team it can help to have a dev or two volunteer to occasionally update the project or have a update schedule. I typically upgrade my Angular projects every month or two. This keeps any changes minor and I get all the great benefits we discussed above. Angular is constantly improving. Taking the time to upgrade your app can get you many great benefits for free thanks to all the amazing hard work of the Angular team and community.