Angular 9: AOT, Ivy, & Upgrading

What’s New in Angular 9?

JavaScript-based front-end libraries and frameworks are evolving faster than ever before. For example, the Angular web framework just released version 9. Angular is open-source. In other words, contributors from all over the world are hard at work integrating the latest best practices and innovative new ideas.

I’ll walk you through the changes in Angular 9. I will also guide you about how you can easily install Angular 9 or upgrade your existing apps to the latest version. After that, I will discuss some upcoming job opportunities for Angular 9 developers. Lastly, we’ll look at what employers need to know about Angular.

Let’s see what version 9 has in store for us.

History of Angular 9

The development of Angular 9 started back in 2019. While still under development, the first preview went public on July 31, 2019.

The main focus of this version was to improve the internal functionality of the Angular framework. So, that Angular apps can have a better performance as compared to its popular competitors like React and Vue.js. 

Angular 9 Features

Angular is a continuously evolving front-end framework that helps us create scalable web applications. With the release of Angular 9 on February 6, 2020, the team has introduced some new and exciting features. For example, the Ivy rendering-engine and Ahead-of-Time compilation.

As a major version release, it also comes with some breaking changes. Below is a list of new features in Angular 9 that are worth noting.

Introducing Angular Ivy – A New Rendering-Engine

Angular Ivy in the new default rendering engine. Starting from version 9 of Angular your TypeScript code will be compiled using Ivy instead of the older ViewEngine (VE).

This change brings significant advantages that were not possible with ViewEngine. Basically, Ivy decreases your bundle sizes, enhances testing, and improves debugging capabilities. In addition, Ivy uses Ahead-of-Time compilation to speed up your apps.

Bundle Size

According to official Angular reports, Ivy can substantially decrease the source code of small and large applications. But for a medium-sized project, you might only see minor improvement.

The reason is that often small websites don’t use many features of Angular. That means Ivy can remove parts of unused code using the tree-shaking concept.

Similarly, large or enterprise-level applications that use a lot of components that can be dramatically minimized. These applications benefit from reduced factory size.

The reason behind only a minor change in medium-sized projects is that they can’t truly take benefit from tree-shaking. And most of the time, they don’t have sufficient components to implement small factories.

Using the Ivy compiler, the bundle size of small apps is likely to decrease by 30%. Large websites can see a change between 25% to 40%.

Default Rendering Engine

In Angular 8, Ivy was available as an optional rendering engine. Therefore, people could already try the new compiler in their projects.

Previously, you had to write a small code snippet inside the “tsconfig.json” file to enable Ivy explicitly. For example:

"angularCompilerOptions": {
    "enableIvy": true
}

Additionally, after enabling Ivy via the “tsconfig.json” file, you also needed to execute the compiler using ngc command:

 node_modules/.bin/ngc

But with the latest release of Angular 9, Ivy is used as a default view rendering engine for your apps. So, you no longer have to enable Ivy in the “tsconfig.json” file, as seen above manually.

There is no difference between Ivy and ViewEngine in terms of API syntax. There is also no change in the way you create modules and components. It is an under-the-hood change. So everything you have learned about Angular in the past is still valid and applicable.

Ahead-of-Time Compilation

Ahead-of-Time (AOT) compilation is an old programming concept. The idea is that compiling a code before execution gives a significant boost towards the speed of any application. It also brings other advantages like better IntelliSense and debugging ability.

Previous versions of Angular utilized the Just-in-Time compilation method. However, Just-in-Time (JIT) compilation has additional overhead. That overhead negatively affects the loading speed of our web applications.

Angular 9 introduces an Ahead-of-Time compiler. In other words, our apps will load faster in web browsers, without writing any additional code.

Isn’t that great?

You get the same app as before, but as your code is pre-compiled in the AOT compilation method. In addition, you will get information regarding bugs or errors immediately. In the past, this was not possible since earlier versions of Angular utilize Just-in-Time compilation.

Different Modes To Check Your Templates

The Angular framework is packed with three modes to help us analyze the bindings and expressions inside our templates.

The template type checking modes available in Angular 9 include Basic, Full, and Strict.

Each of the modes is suitable in different scenarios. To set a specific mode for your app, you need to configure it using “strictTemplates” and “fullTemplateTypeCheck” flags. You can place these flags inside the “tsconfig.json” configuration file for your project.

Basic Mode

Basic mode has a lot of limitations when it comes to validating our Angular templates. It helps us quickly check our templates by only validating the top-level expressions.

Basic mode is the right choice in a production environment. That’s because the speed of your app is more crucial for the users.

To enable basic mode, simply set the “fullTemplateTypeCheck” flag as false.

Full Mode

As its name suggests, the full mode is more aggressive than basic mode and thoroughly checks our Angular templates.

Full mode correctly validates embedded views, the return type of pipes, and that local references have the correct type.

To set up full mode of type-checking in your app, you can simply mark the “fullTemplateTypeCheck” flag as true.

Strict Mode

Strict Mode is a new addition to Angular in version 9. This method of template checking works in combination with the Ivy rendering engine. This new mode aggressively validates every part of our web application. As described by the Angular docs, strict mode is a superset of both basic and full modes. Additionally, this mode will report the most errors and is only available when using Ivy.  

Use strict mode by setting the “strictTemplates” flag to true.

Faster Internationalization (i18n)

Historically Angular allows us to create multilingual websites using the i18n translation module. But it performed the substitution of dynamic values during the build process. This slowed down our overall web application.

Angular 9 solved this issue by relocating these substitutions to the end of the build process. This minor fix brings significant performance improvement to apps that utilize this latest version of Angular.

According to some Angular contributors, this minor fix can improve website speed by up to 10%.

Added Support for TypeScript 3.7

TypeScript 3.7 was released in November 2019. Since then, upgrading TypeScript versions was one of the most anticipated features coming to Angular 9. TypeScript 3.7 introduces some exciting core features such as Optional Chaining, Assertion functions, and Nullish Coalescing, to name a few.

The latest version of Angular drops support for TypeScript 3.5 and now uses TypeScript 3.7. The support for the newest TypeScript version ensures that the Angular framework remains fresh and relevant throughout 2020 and beyond.

Improved “ng update”

“ng update” is the CLI command used to update our Angular application and its dependencies. Nothing has changed to how this command functions. But, the Angular team has tried to enhance its user experience by providing a bit more detailed information. As a result, this increases its overall reliability.

New in “ng update” is the introduction of –create-commits flag which automatically creates git commits after each successful migration. This way, you can easily debug and trace the error in case something went wrong during the migration process.

More Predictable CSS Classes and Style Bindings

The Ivy compiler has improved the way we handle CSS classes and styles of our web pages. In older versions of Angular, if we have multiple CSS styles defined for an element, then the last one will be applied. In other words, it was dependent on the timing.

Angular 9 introduces a change so that the styles are applied predictably. The result is that the style with the most specific and highest precedence renders as expected.

Deprecated and Removed Features in Angular 9

The Angular team follows strict guidelines when deprecating or removing a feature. This way, you will get some time to prepare for the breaking changes introduced in new major versions.

Features and APIs that were marked as deprecated in version 6 or earlier have been removed in Angular 9.

Below is the list of APIs removed in Angular 9.0.0.

@angular/core

• Renderer
• RootRenderer
• RenderComponentType
• WtfScopeFn
• wtfCreateScope
• wtfStartTimeRange
• wtfEndTimeRange
• wtfLeave

@angular/common

• DeprecatedI18NPipesModule
• DeprecatedCurrencyPipe
• DeprecatedDatePipe
• DeprecatedDecimalPipe
• DeprecatedPercentPipe

@angular/forms

• NgFormSelectorWarning
• ngForm element selector

@angular/service-worker

• versionedFiles

Upgrading to Angular 9

Do you already have an existing website in an older version of Angular? Then you should upgrade it as soon as possible. After upgrading you can enjoy the modern and more efficient features delivered in the latest version of Angular.

How to Upgrade From Angular 8 to Angular 9

Updating an existing website from Angular 8 to Angular 9 is a simple and straightforward process. If you want to make the transition seamless and error-free, then you have to follow some essential steps.

1. You must have the latest version of TypeScript (version 3.7). 
2. You must update your code and replace any old API calls with the new ones. In the previous section, you can find the names of APIs that are no longer present in Angular 9.

To begin the update, start by making sure you are running the latest release of version 8 in your project:

ng update @angular/cli@8 @angular/core@8

Then simply update Angular to version 9 using the following command:

ng update @angular/cli @angular/core

Still not ready? Did your app crash after upgrading? Then check out the official update guide provided by the Angular team. Simply input the required information about your existing Angular app, website complexity, and the dependencies used. The tool will then provide a step by step guide on updating your app.

How to Install Angular 9 in Three Steps

Do you need to start a new website or project from scratch? Angular 9 is an excellent choice. In this section, I’ll walk you through the update step-by-step. Upgrade or set up your very first Angular 9 project in just a few steps.

Before getting started, you need to have node.js and npm already installed on your computer.

1. Install Angular CLI

Angular comes with its built-in command-line tool. It’s useful for things like creating a new project, debugging, bundling, and deployment. The Angular CLI is also used to upgrade the Angular version or dependencies.

You can install Angular CLI on your computer using npm. Simply execute below command in the Terminal or console window:

npm install -g @angular/cli

2. Create a New Application

Now its time to make use of the CLI tool provided by Angular to create a new website. Use the following command to initiate a new project named “my-project-name“:

ng new my-project-name

After you execute the above command, you will be asked which additional features you would like to include in the project. Press the “Enter” key to use the defaults.

3. Run Your App

Angular CLI can create its local development environment (i.e., server) so that you can test your projects locally.

ng serve --open

To run the app on your local server and open it in a browser, simply use this CLI command:

Why Angular 9?

There are only two major JavaScript frameworks that directly compete with the Angular. These are React and Vue.js. Previously, when compared with competitors, Angular faced criticism because of its large bundle size. But that is no longer true. 

Since the integration of the Ivy view rendering engine in Angular 9, the problem of large bundles has been solved! Bundle size should now be comparable to competing libraries and frameworks.

Historically, Angular was mostly considered a candidate for enterprise-level applications due to the scalability it provides. But now small bundles also mean faster performance for smaller applications. This is exciting for small and medium-sized website owners who want to utilize Angular.

Angular 9 Jobs

Thousands of companies throughout the world are using Angular. Some of the most notable companies that use Angular include Microsoft, Forbes, Vmware, Github, and Google. 

There is a continuously growing demand for Angular developers with every new release. Different companies hire individuals to maintain their projects. So, there is a bright future if you plan to spend time on learning Angular 9.

Are you already familiar with the concepts of Angular? Do you see the opportunity to grow your career with Angular? Then make sure to check out the job we have available here at Angular Jobs. 

Angular 9 for Employers

Stability

Stability is a major point of Angular. Google spends millions of dollars per year to support the project. So rest assured, Angular will receive proper maintenance, upgrades, into the future. Furthermore, it will continue to be a driving force in web app development for years come.

Popularity

Developers have given Angular over 58,000+ Stars on Github. More and more companies are joining the Angular family with each passing day. If you are an enterprise business owner, or just running a simple website, then you to should try Angular 9. It provides a lot more features, flexibility, and ability to scale. 

Developer Talent

Finding talented developers can be a challenge. Angular has one of the most developed community ecosystems with resources to help developers succeed. 

Note: You can find skilled Angular developers to join your team and speed up development right here on Angular Jobs. 

Conclusion

The Ivy rendering-engine is likely to be the most impactful feature of Angular 9. That’s why it received the spotlight well before this most recent major version release.

Lastly, this version of Angular is more like an under-the-hood enhancement than anything else. Most of the syntax is the same as before, but with way better performance.

Do you still have questions about Angular 9?

Discuss the latest updates in the Angular Developers Mastermind group on LinkedIn.