What's New in Angular 9

New Features in Angular 9

1. JavaScript Bundles and Performance
   We’ll start by looking at one of the problems that plagued previous versions of Angular: large bundle files that have negatively impacted download times and, as a consequence, application performance.

2. Ivy Compiler
   The big new feature we'll dive into is the Ivy compiler. We'll explain what Ivy does and why it's actually an important feature for the future of Angular (it solves some of the problems with large bundles and application performance).

3. Selector-less Bindings and Internationalization
   We'll touch on a few other new features, including selector-less bindings and internationalization support. You'll see why we're calling this an evolutionary release rather than revolutionary.

4. Benchmarking Angular 8 and the Pre-release Version of Angular 9
   We’ll run some benchmark tests to compare performance between Angular 8 and a pre-release version of Angular 9.

Added Angular 9 Features -
1.Added undecorated classes migration schematic in the core.
2.The formControlName also accepts a number in the form
3.Now allow selector-less directives as base classes in View Engine in the compiler
4.Added support selector-less directive as base classes in Ivy and also make the Ivy compiler the default for ngc.
5 Convert all ngtsc diagnostics to ts.Diagnostics
6.bazel: support ts_library targets as entry-points for ng_package.
7.core: add dynamic queries schematic.
8.core: Mark TestBed.get as deprecated.
9.ivy: expose window.ng.getDebugNode helper and also support ng-add in localize package.
10.ivy: i18n – add syntax support for $localize metadata block.
11.ivy: i18n – reorganize entry-points for better reuse.
12.language-service: enable logging on TypeScriptHost.
13.language-service: provide diagnostic for invalid templateUrls.
14.language-service: provide diagnostics for invalid styleUrls.

JavaScript Bundles and Performance

One of the ongoing problems with previous Angular versions is the relatively large file size of the app — more precisely, the file size of the generated JavaScript bundles. If you compare Angular to other libraries such as React or Vue.js, the Angular app is significantly bigger.

At runtime, you probably won’t feel the difference. While Angular runtime performance is good, the loading can take longer because even a simple app can be relatively large.

The size of the JavaScript bundles also hints at another problem: there's more to learn with Angular because Angular is a complete framework with many built-in developer tools, while other JavaScript libraries are more focused on components.

So what could the Angular team do to mitigate the problems stemming from the large bundle files in earlier Angular versions?

Understanding Angular ViewEngine

Before Angular 8, the framework relied exclusively on ViewEngine (sometimes referred to as the "VE") to build and render code in browsers. Angular components are written using the TypeScript language. TypeScript is a superset of JavaScript, and we use a compiler or "transpiler" to render TypeScript into a dialect of JavaScript that runs in the browser. Angular historically has relied on ViewEngine to do this transpiling from TypeScript code into JavaScript.

The Angular ViewEngine takes the templates and components and translates them into regular HTML and JavaScript so that the browser can interpret and display them.

Angular Ivy and Faster Mobile Apps

Smartphones and other mobile devices account for about half of the website traffic worldwide. A considerable percentage of these mobile devices access web pages from locations that suffer from slow internet connections.

Developers can redesign existing apps to reduce the size of the downloadable assets and enhance the mobile user experience, but these changes can be difficult, expensive, and introduce unforeseen risks to their projects.

By reducing the size of JavaScript bundles, Ivy becomes a welcome improvement for developers trying to speed up application startup.

Smaller Bundles and Better Performance Thanks to Ivy

Previous versions of Angular have relatively large file size of the final bundles compared to React or Vue.

The performance of the Angular runtime is quite good but the loading time is longer because of the large file size which affects the overall performance of the application.

So what the Angular team is doing to solve the large size of the final bundles?

Enter Ivy.

Before Angular 8, the framework used ViewEngine as the renderer,
With Angular 8, Ivy is in experimental mode behind an optional flag,
With Angular 9+, Ivy is the default compiler.
What is Ivy?

Ivy is a complete rewrite of the Angular renderer which is simply the part of Angular that transforms your Angular templates into JavaScript code.

Angular components are a mix of TypeScript code, HTML and CSS. TypeScript is a superset of JavaScript, that needs to be compiled into JavaScript before it can be consumed by a web browser.

Angular previuosly made use of ViewEngine to transform TypeScript code to JavaScript.

The Angular ViewEngine transforms the templates and components to HTML and JavaScript so that the browser can render them.

These are some informations about Ivy:

The Ivy compiler is abtsracted from developers, and will replace ViewEngine so what you know about Angular is still valid.
Angular 8 allows developers to play with Ivy but with Angular 9, Ivy is the default renderer.
The Ivy compiler outputs much smaller JavaScript bundles, so Ivy solves Angular’s bundle problems.
The Ivy compiler will not change how you work with Angular so what you previosly learned about Angular will still work in Angular 9+.

Angular 9.0.0-next.5
A build with Angular 9.0.0-next.5 yielded a slightly small main.js file at 214KB. That's a 13 percent improvement from Angular 8.

Angular 9.0.0-rc.7

Bug Fixes
animations: leaking detached nodes when parent has a leave transition (#34409) (6607fb4), closes #25744
common: ngStyle should ignore undefined values (#34422) (ee1eebd), closes #34310
ivy: avoid duplicate errors in safe navigations and template guards (#34417) (d6edeab)
ivy: avoid using proto when reading metadata in JIT mode (#34305) (08ce026)
ivy: don’t produce template diagnostics when scope is invalid (#34460) (c1fd629), closes #33849
ivy: generate a better error for template var writes (#34339) (418d586), closes #33674
ivy: i18n – remove translate function when clearing translations (#34346) (1489e5e), closes #32781
ivy: i18n instructions thrown off by sanitizer in IE11 (#34305) (bed62b1)
ivy: improve ExpressionChangedAfterChecked error (#34381) (7ea3984)
ivy: inconsistent attribute casing in DebugNode.attributes on IE (#34305) (9bff8e7)
ivy: incorrect injectable name logged in warning message on IE (#34305) (60d1d5e)
ivy: inheritance in JIT mode not working correctly on IE10 (#34305) (65fb2fd)
ivy: inheriting injectable definition from undecorated class not working on IE10 in JIT mode (#34305) (d83599d)
ivy: record correct absolute source span for ngForOf expressions (#31813) (931cb5e)
ivy: reorder provider type checks to align with VE (#34433) (7916b1e)
ivy: unknown property and element checks not working correctly in IE (#34305) (0ff54f2)
ivy: validate the NgModule declarations field (#34404) (03e236a)
language-service: HTML path should include last node before cursor (#34440) (76e4870)
language-service: Proper completions for properties and events (#34445) (4e41bf9)
language-service: Remove completions for let and of in ngFor (#34434) (ab61480)
ngcc: correctly match aliased classes between src and dts files (#34254) (4bffb6b), closes #33593
ngcc: handle CommonJS re-exports by reference (#34254) (9ca5faa)
ngcc: handle imports in dts files when processing UMD (#34356) (81c75cf)
ngcc: handle UMD re-exports (#34254) (84a7d8a)
ngcc: render UMD imports even if no prior imports (#34353) (c26738d), closes #34138
ngcc: use the correct identifiers when updating typings files (#34254) (c0c2ab3)
Features
forms: expand NgModel disabled type to work with strict template type checking (#34438) (b1d4c58)
ivy: error in ivy when inheriting a ctor from an undecorated base (#34460) (f563c7c)
ivy: throw compilation error when providing undecorated classes (#34460) (0638e65)
Performance Improvements
compiler: optimize cloning cursors state (#34332) (5d871b5)
compiler: speed up i18n digest computations (#34332) (adb0663)
compiler: use a shared interpolation regex (#34332) (940e62b)
ivy: cache export scopes extracted from declaration files (#34332) (eb9a8ac)
ivy: eagerly parse the template twice during analysis (#34334) (fb4a11a)
ivy: reuse prior analysis work during incremental builds (#34288) (c387952)
ivy: share instances of DomElementSchemaRegistry (#34332) (ce94192)
ivy: use module resolution cache (#34332) (82442c5)