87

Everything you should know about Angular 9

The major release of Angular version 9.0.0 is available now. It was released on February 6, 2020. This major release has affected the entire platform, including the framework, components, Angular Material, and the CLI.

The Angular 9 is different from its previous versions in many aspects. It moves all applications to use the Ivy compiler and runtime by default and introduces many improved ways of testing components. Angular 9 is now updated to support and work with TypeScript version 3.6 and 3.7.

How to update to Angular 9 from previous Angular versions

It is always advised to use the latest version of Angular. Here, we are specifying how to upgrade your older version of Angular in the latest one. It doesn’t matter which Angular’s version you are using, you can easily upgrade it to Angular latest version by using the following steps:

Follow the steps given below to update the Angular CLI to the Angular version 9:

Step 1: First, check your current version of Angular CLI by using the following command.

Step2: Update your local angular cli to version 8.3.17 or 8.x version using the following command if you are using the older versions of Angular.

Step 3: After updating your angular cli to version 8 or above, use the following command to update angular cli to Angular version 9.

Step 4: You can use the following command if you want to install the Angular 9 specifically.

An alternate method to update the Angular CLI to the latest Angular version

• First, check the current version of your Angular CLI by using the ng –serve
• Now, run the following command to uninstall your older version of Angular.

• Now, verify and clear the cache by using the following commands.

• Clean the cache by using the following command:

• Now, install the latest Angular CLI by using the following command.

Note: Here, you can see that the installed Angular version is Angular 10. Angular 10 is the latest Angular version, which was released on June 24, 2020.

Advantages of using Angular 9

Angular 9 moves all applications to use the Ivy compiler and runtime by default. The Ivy compiler resolves a lot of bug issues and fixes them. Along with these bug fixes, the Ivy compiler and runtime provides a lot of other advantages also.

Following is the list of some advantages that you get in Ivy compiler and runtime:

• Smaller bundle sizes
• Testing is faster
• Better bug fixes & debugging
• Adds Improved CSS class and style binding
• Adds Improved type checking
• Adds Improved build errors
• Adds Improved build times, enabling AOT on by default
• Improved Internationalization

Smaller Bundle Sizes

The improved and updated Ivy compiler has been designed to remove the unused parts of Angular via tree-shaking and generate less code for each Angular component. By using these improvements, small and large apps get a lot of benefits.

• The small size apps that don’t use many Angular features get a lot of benefits from tree-shaking.
• The large apps that use many Angular components get benefits as the size of these apps is reduced.
• The medium-sized apps can also reduce their sizes and become slightly smaller. However, they get fewer benefits from tree-shaking because they don’t have enough components to leveraging smaller factories truly.

Testing is faster

In Angular 9, Ivy is more efficient because it has implemented the new and improved form, structure, and appearance of TestBed.

• In previous versions, the TestBed would recompile all components between each test’s runnings and doesn’t care if there were any changes made to components or not (for example, through overrides).
• In Ivy, TestBed doesn’t require to recompile the components between tests until you manually override a component, so it doesn’t face recompilation issues between the tests.
• So, after this change, the tests are about 40-50% faster.

Better bug fixes & debugging

It is very difficult to develop a completely bug-free program, so it is important that your codebase must be equipped with tools and techniques to check the bugs by themselves. To resolve this issue, Ivy provides several more tools to debug your applications and fix bugs. Now, Ivy provides a new ng object for debugging when you run an application in Dev Mode with the Ivy runtime.

• The Ivy in Angular 9 now facilitates you to access instances of your components, directives, and more.
• Now, you can call methods and update the state manually.
• You can trigger change detection with applyChanges when you need to see the results of change detection.

Adds Improved CSS class and style binding

The Ivy compiler and runtime are inbuilt with some specific features that predictably handle CSS class and style. In the previous versions, if an application contained competing definitions for a style, those styles would destructively replace each other. With the Ivy compiler’s arrival in Angular 9, you can easily manage styles through a clear, consistent order of precedence, which is not dependent on timing.

See the following template:

You can see in the above code that binding was evaluated last would win, and this could depend on the timing of changes to these expressions. If myColor and myOtherColor both were undefined, the static ‘red’ style would be ignored.

After the arrival of the Ivy compiler in Angular version 9, you can manage your styles through a clear, consistent order of precedence without depending on timing. The most specific styles always have the highest precedence. For example, a binding to [style.color] overrides a conflicting binding to [style].

See the example:

Adds Improved type checking

The Ivy compiler in Angular 9 provides you a lot of new facilities to check more of the types of your application and also applies more strict rules. These Ivy features help you and your team to catch bugs and fix them earlier in the development process. Now, Angular 9 is providing three modes to achieve this facility. Apart from the default flag, the other flags that the angular supports are:

fullTemplateTypeCheck: This flag is activated when the compiler has to check everything within your template (ngIf, ngFor, ng-template, etc.)

strictTemplates: This flag is activated when the compiler has to apply the strictest Type System rules for type checking.

Adds Improved build errors

The new compiler Ivy introduced in Angular 9 is faster and offers stronger type safety. The Ivy compiler speeds up the build times significantly that gives less time for the builds to complete. It is also very efficient to make all of the error messages easier to read.

In the previous Angular version 8, or View Engine, you can see that a typical compiler error would look like the following:

In the Angular version 9 with Ivy, the same error will look like this:

Adds Improved build times, enabling AOT on by default

In Angular 9, the Ivy compiler’s new architecture has a lot of significant improvements that enhance the compiler’s performance. The compiler’s performance is measured in terms of the overhead on top of a plain TypeScript compilation of an application.

Generally, with the Ivy compiler, the overhead is decreased by nearly 40%. It means the app you will build by using the Ivy compiler will be noticeably faster.

Because of this speedup, you can use AOT even for dev-mode builds. This means that you would no longer require entryComponents and ng serve. These will get benefit from the same compile-time checking as production builds, significantly improving the developer experience for Angular. Now, these components will be discovered and compiled automatically by their usage.

Improved Internationalization (i18n)

Internationalization (i18n) was always a core and important feature of Angular, where you could build your application once per locale and receive highly optimized and localized applications.

• Angular 9 has introduced a new solution that balances most of the drawbacks you face in previous versions without losing performance.
• Angular 9 makes it faster by moving the build-time i18n substitutions later in the build process. This change makes the process up to 10 times faster.

---