Staying Updated with Angular

Angular • Dec 21, 2021

At Halodoc, we use Angular framework for client side development of all our websites. We started with Angular version 2 and recently updated it to 12. We have successfully been able to do so because we take this as a priority.

While Angular upgrade is a choice, it should be diligently done in order to utilise the maximum benefits of the framework.

What is Angular?

Angular is an open source framework developed and maintained by the Angular Team at Google. It is developed using TypeScript, the superset of JavaScript.

Wikipedia defines Typescript as: - "A programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript."

Ever since its development, Angular is widely used for client side development, Single Page Applications(SPAs) and Progressive Web Apps(PWAs).

Angular Upgrade and Versioning:

AngularJS, the first version of the concept was completely rewritten, and was released as Angular 2 in the year 2016. The new version adopted semantic versioning with an aim to release new updates constantly. This frequent update has made Angular one of the best choices for client side development.

As per the semantic versioning syntax, Angular version numbers have three parts: major.minor.patch. For example, version 7.2.11 indicates major version 7, minor version 2, and patch level 11. According the official website, the significance of each of these is as mentioned below:

Major releases contain significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you might need to run update scripts, refactor code, run additional tests, and learn new APIs.

Minor releases contain new smaller features. These are fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your applications and libraries to begin using new APIs, features, and capabilities that were added in the release. We update peer dependencies in minor versions by expanding the supported versions, but we do not require projects to update these dependencies.

Patch releases are low risk, bug fix releases. No developer assistance is expected during update.

What happens to the older versions?

The Angular Team has an excellent support system for the the older versions. Besides this, all the Angular versions are backward compatible. Typically, all major releases are supported for 18 months which includes:

6 months of active support, during which regularly-scheduled updates and patches are released.
12 months of long-term support (LTS), during which only critical fixes and security patches are released.

Release Frequency

As per the official website, Angular Team releases:

A major Angular version every 6 months
1-3 minor releases for each major release
A patch release and pre-release (next or rc) build almost every week

Why is this upgrade necessary ?

As newer versions are released, it is a good practise to stay updated with the latest version. Although this is not mandatory but it is recommended to do so for the following reasons:

Constant Evolution of the Framework:
From the introduction of Angular CLI in Version 4 to usage of WebPack 5 in the Angular 12, the upgraded versions help us developer to write a better and efficient code.

Introduction of new features:
ng update and ng add features were added in the Angular 6 version. ng add adds the NPM package for a published library to the workspace, and configures the project in the current working directory (or the default project if you are not in a project directory) to use that library, as specified by the library's schematic.

Better performance:
With the continuous effort to make the framework better, the team pays special attention to increase the performance. Compatibility with Angular material, reduction of bundle size are some of the steps in this direction.

Better Tooling Support:
With the Angular 12, Angular components will now support inline Sass in the styles field of the @Component decorator. Similar to this, there are multiple changes done to for the tooling support.

Key changes in major upgrades:

With every major update, Angular team tries to resolve some critical issues which would eventually help meet the end goal of developing a "simple, fast and small framework". Below is the list of all major changes done in each version:

Angular 2 -
Angular 2 was a complete rewrite of AngularJS. AngularJS was based on MVC architecture while Angular 2 was built using MVVM architecture.

Angular 4 -
This version introduced HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests. New router life cycle events for Guards and Resolvers were added. Four new events: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd joined the existing set of life cycle event such as NavigationStart. Developers could conditionally disable animations from this version onwards.

One of the major change in Angular 4 version was the introduction of a new View engine that could support AOT(Ahead of Time) compilation method. This change helped reduce the bundle size almost by half, as compared to the already in use JIT(Just in Time) compilation method. Just in time mode used to compile the code at runtime in the browser, whereas AOT compiles the code during the build itself, on the server. AOT thus serves with multiple benefits such as:

Faster rendering
Fewer asynchronous requests
Smaller Angular framework download size
Detect template errors earlier
Better security

Angular 5 -
Angular 5 was released on November 1, 2017. Key improvements in Angular 5 included support for progressive web apps, a build optimiser and improvements related to Material Design.

Angular 6-
Angular 6 was released on May 4, 2018. This was a major release focused less on the underlying framework and more on the toolchain and on making it easier to move quickly with Angular in the future, like: ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6.

Angular 7 -
Angular 7 was released on October 18, 2018. Updates regarding Application Performance, Angular Material & CDK, Virtual Scrolling, Improved Accessibility of Selects, now supports Content Projection using web standard for custom elements, and dependency updates regarding Typescript 3.1, RxJS 6.3, Node 10 (still supporting Node 8).

Angular 8 -
Angular 8 was released on May 28, 2019. Featuring Differential loading for all application code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an opt-in preview. Angular Ivy opt-in preview includes:

Generated code that is easier to read and debug at runtime
Faster re-build time
Improved payload size
Improved template type checking
Backwards compatibility

Angular 9 -
Angular 9 was released on February 6, 2020. Version 9 moved all applications to use the Ivy compiler and runtime by default. Angular was updated to work with TypeScript 3.6 and 3.7. In addition to hundreds of bug fixes, the Ivy compiler and runtime offers numerous advantages:

Smaller bundle sizes
Faster testing
Better debugging
Improved CSS class and style binding
Improved type checking
Improved build errors
Improved build times, enabling AOT on by default
Improved Internationalisation

Angular 10 -
Angular 10 was released on June 24, 2020.It introduced new features like - New Date Range Picker (Material UI library), warnings about CommonJS imports, optional Stricter Settings, new default browser configuration, etc.

Angular 11 -
Angular 11 provides experimental support for WebPack 5. Angular is also moving from TSLint to ESLint with this update. It has removed support for IE 9, 10, and IE mobile completely. Angular 11 also features automatic font inlining that converts your Google Fonts and Icon to inline in index.html.

Angular 12 -
Angular 12 was released on May 12, 2021. With this release, Angular has deprecated support for IE11. The strict mode of Angular has now been enabled by default in the CLI as one of the features of Angular 12. Strict mode improves maintainability and assists you with catching the bugs early in the process. In this version, ng build will default to a production build.

Steps to Upgrade

Angular has an official page dedicated to the steps of upgrade that should be followed.

It is recommended by the Angular team to sequentially upgrade the major versions.

For instance, let us consider a case where we need to upgrade a project from version 8 to 12. The best approach would be to upgrade to Angular 9, followed by 10, 11 and then, finally 12. The step by step method to achieve this upgrade as follows:

Run ng version to check for the angular version of the project. Version can also be checked in the package.json file.
ng update gives the latest version of the angular available.
Choose the current version and the desired upgraded version in the http://update.angular.io and follow the steps.

Common Issues

The upgrade process is like the latest "squid game" in the sense that it seems to be easy and it is easy, provided you do not get caught into the loop of errors caused due to dependency issues. Although the steps mentioned in the official documents are apt for the process, but now and then, additional steps needs to be followed to get rid of the dependency errors that might occur, depending on the complexity of the project.

Few points that should be considered to avoid errors are as follows:

Use well supported dependencies: With multiple options available out there, it is always preferable to go for the packages that are frequently updated as per the newer Angular versions. The official NPM(Node Package Manager) site is the best place to get the details of the listed packages.
Upgrade the dependencies as well: In order to avoid futile errors, it is better to religiously upgrade the dependencies as well, as per the latest Angular version.
Wait for the right time: It is critical for the team to wait for the release of a stable version for the newest Angular release, before upgrading the project. This is recommended because, newer Angular version might have unknown bugs which are often fixed by the team in the first release of the stable version.

Conclusion

Although, our journey from Angular 2 to Angular 12 has been full of adventurous errors, bug fixing and sleepless nights. But, I must say on behalf of our developers that for an enterprise level project, this is a road that needs to be taken, sooner or later.

Staying updated has helped us improve the performance of our websites significantly. Our page loading speed is continuously improving making it one of the most user friendly healthcare platform in Indonesia.

Want to learn more about Angular ?

Here are some of the blogs that you might consider reading to know more about Angular and Web development.

Interested in exploring with us ?

We are always looking out for top engineering talent across all roles for our tech team. If challenging problems that drive big impact enthral you, do reach out to us at careers.india@halodoc.com

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek and many more. We recently closed our Series C round and In total have raised around USD$180 million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.