Loading...
LearnTech

What’s new in Angular 9 ?

Angular 9

“Do you like Angular, but just want it smaller, easier to debug, and compiled faster?” Hold down, Angular 9.0.0 has finally arrived. This new version of Angular has significant improvements to the previous versions. In this new version of Angular, the IVY compiler has become mature enough to deal with all types of applications.

In version 6.0, the Angular JavaScript framework was delivered with a new rendering engine called Ivy.  Google explained about Ivy. According to the Angular team, this rendering engine is focused on improving speed and speeding up compilation. Ivy made a promise to developers to reduce the size of the code and give them more flexibility. The Angular team also indicated that the transition to the new rendering engine would be smooth.

In version 9.0 this time, all applications will use the Ivy compiler by default. The tool has matured. Indeed, the team noted that in addition to hundreds of bug fixes, the Ivy compiler and the runtime offer many benefits:

  • Smaller bundle sizes;
  • Fast testing;
  • Improved debugging;
  • Improvements in CSS classes and style links;
  • Better type verification;
  • Improved build errors;
  • Improved build time, AOT activation by default;
  • Enhanced I18N.

Reduced Bundle Sizes

The Ivy compiler has been designed to remove parts of Angular that are not used in the tree and to generate less code for each Angular component. With these improvements, small and large applications can see the most dramatic size savings.

  • Small apps that don’t use many Angular features can benefit the most from tree-shaking (a term commonly used in the JavaScript context to talk about eliminating dead code).
  • Large applications with many components can benefit most from the reduced factory size.
  • Medium-sized applications should see equivalent or slightly smaller bundle sizes, as they benefit less from tree-shaking and do not have enough components to benefit from a reduced factory size.
IVY size improvements in angular 9

Fast Testing

The team worked on implementing TestBed in Ivy to make it more efficient. Previously, TestBed recompiled all components between the execution of each test, regardless of whether any changes were made to the components (for example, through replacements) or not.

In Ivy, TestBed does not recompile components between tests unless a component has been replaced manually, which allows it to avoid recompilation between the vast majority of tests.

With this change, the basic acceptance tests of the framework are about 40% faster. The team expects users to see their own application test speed be around 40-50% faster.

Improved Debugging

Ivy provides you with more tools to debug your applications. When you run an application in Dev mode with the Ivy runtime, you are now offered the new ng object for debugging.

  • You can request Angular access to instances of your components, directives, etc.
  • You can manually call methods and update the status.
  • When you want to see the results of the detection of modifications, you can trigger the detection of modifications with ‘applyChanges’.
applyChanges in Angular 9

Ivy also improves the stack trace for debugging issues such as ‘ExpressionChangedAfterItHasBeenCheckedError’. Previously, the stack trace could be useless:

Improved Debugging in Angular 9

With Ivy, you see a more useful stack trace that lets you jump directly to the model statement with the expression that has changed.

Improved Debugging in Angular 9

Improvements in CSS classes and style bindings

The Ivy compiler and runtime provide improvements for style management. Previously, if an application contained competing definitions for a style, these styles would be destructively replaced. With Ivy, styles are predictably merged.

Consider the following model and component snippets:

CSS CODE:

< my-component style = "color: red;"  [ style .color ] = "myColor"  [ style ] = "{color: myOtherColor}" myDirective > < / div >
CODED:

@ Component ( { 
  host :  { 
    style :  "color: blue" 
  } , ...
 } )
...
 
@ Directive ( { 
  host :  { 
    style :  "color: black" , 
    "[style.color]" :  "property" 
  } , ...
 } ) 
...

In previous versions, if ‘myColor’ and ‘myOtherColor’ were not defined, the static style red would have been ignored.

With version 9, you can manage your styles in a clear and consistent order of priority that does not depend on timing. The most specific styles always have the highest priority. For example, a binding to [ style. color ] replaces a conflicting link to [ style ] .

However, for reasons of backward compatibility, the team left the behavior of the links [ ngStyle ] and [ ngClass ] be the same as before. When their link values ​​are updated, the new values ​​will replace all competing links.

As a side effect of style refactoring, you can now also link CSS custom properties (also known as CSS variables).

< div [ style .-- main-border-color ] = "'#CCC'" > 
  < p style = "border: 1px solid var (- main-border-color)" > hi < / p > 
< / div >

Improved Type Checking

The Angular compiler can check more types of your application and enforce stricter rules. These features will help you and your team to spot bugs earlier in the development process.

The framework supports two main flags for additional type checks in addition to the default:

  • fullTemplateTypeCheck – Activating this flag tells the compiler to check everything in your model (ngIf, ngFor, ng-template, etc.);
  • strictTemplates – Enabling this flag will apply the strictest type system rules for type checking.

Improved Build Errors

The new Ivy compiler is not only faster and provides greater type security, it also makes it easier to read all error messages.

In version 8 or View Engine, a typical compilation error would look like this:

Compilation Errors Improvements in Angular 9

In version 9 with Ivy, the same error looks like:

Compilation Errors Improvements in Angular 9

More Reliable ng Updates

The framework has benefited from some modifications to the functioning of ‘ng update’ to make the functionality more reliable and informative.

  • Always use the latest CLI. From 8.3.19 of the CLI, the framework now uses the CLI of the updated TARGET version during the updates. This means that in the future, updates will always be handled automatically by the latest CLI.
  • Clearer progress updates. ‘ng update’ is now doing more to tell you what’s going on under the hood. For each migration, you will see information about the migration.
  • Easier debugging of updates. By default, ‘ng update’ performs all migrations and leaves the aggregated changes on disk for you to inspect. The update to version 9 also introduces the new flag ‘- create – commits’. When you run ‘ng update – create – commits’ , the tool validates the status of your code base after each migration, so that you can browse and understand or debug changes to your code.

New Components

You can now include functionality from YouTube and Google Maps in your applications.

  • You can display a YouTube player in your application with the new youtube-player. After loading the IFrame YouTube Player API, this component will take advantage of it.
  • The framework also comes with google-map components. These components make it easier to render Google Maps, display markers, and wire interactivity in a way that works like a normal Angular component, saving you from having to learn the entire Google Maps API.

Support for TypeScript 3.7

Angular has been updated to work with TypeScript 3.6 and 3.7, including the hugely popular optional chaining feature of TypeScript 3.7. To stay in step with the ecosystem, the team also updated its version of other ecosystem dependencies such as Zone.JS and RxJS.

How to Update to Angular 9

Here are some basic steps you can follow to update to Angular Version 9 from any previous version. Further to this, you can also visit official site.

First, update to the latest version of 8

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

Then, update to 9

ng update @angular/cli @angular/core

Just in case, if you want global update, hit the below command

npm i -g @angular/cli

Hope, you will like this article. If you have any further questions and updates, please let us know in the comment section.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Skip to content