Default Ivy compiler
Improves the bundle sizes
Faster mobile apps
Allows for better debugging
Adds improved type checking
Faster Testing
Improved CSS class and style binding
Improved build errors
Enables the AOT compiler on by default
Selector-less directives in Ivy
Improved Internationalization (i18n)
The Phantom Template Variable Menace
More reliable ng update
API Extractor Updates
New options for ‘providedIn’
Component Harness
IDE and language service improvements
Typescript 3.7 Support
Default Ivy compiler
Angular 9 incorporates a change in the core structure of the entire framework. All the applications will use the IVY renderer as the default compiler. Apps built with IVY are more efficient. To top it all, the IVY compiler in Angular 9 fixes several bugs and has additional features to it as well. Let’s see now.
Improves the bundle sizes:
Bundle sizes likely to decrease by 25–40 percent based on app size. Small apps benefit the most from tree shaking feature of IVY as they have to generate less code for angular components.
Faster mobile apps
Mobile phones fetch half of the website traffic globally. A considerable amount of users come from places where there are slow internet connections. Hence, it is important for Angular 9 developers to redesign and decrease the size of downloadable files, to increase the mobile user experience.
Allows for better debugging
Debugging is one the many features of IVY compiler and runtime. For developers, it is difficult to develop a program that is completely bug free. That is why it is important to equip the codebase with tools and techniques to flesh out the bugs themselves. The Angular framework in Angular 9 uses some unique techniques and tools to debug its applications.
- one can ask Angular for access to instances of components and directives.
- can trigger change detection with applyChanges
- one can manually call methods and update state
Adds improved type checking
Angular compiler checks the expressions and bindings within the templates of the application and reports any type errors it finds. The bugs are caught and fixed early in the development process. The Angular 9 currently has three modules of doing this. Apart from the default flag, the other flags that the Angular supports are
- fullTemplateTypeCheck — By activating this flag, compiler will check everything within your template (ngIf, ngFor, ng-template, etc)
- strictTemplates — By activating this flag, compiler will apply the strictest Type System rules for type checking.
Have a look at the Template type checking guide in the documentation.
Faster Testing
The implementation of the TestBed in Ivy makes it more efficient to arrange the components between tests. This avoids recompilation between grand majority of tests. With this change, the framework’s core acceptance tests are about 40% faster. User’s own application test speeds will be around 40–50% faster.
Improved CSS class and style binding
The Ivy compiler and runtime handles style in a predictable manner. In the previous versions, if an application contained competing definitions of r a style, those styles would replace each other. With this Angular 9 feature, one can manage styles through a clear, consistent order of precedence which is not dependent on timing.
Improved build errors
The new compiler Ivy is not only efficient but also provides safety. Ivy speeds up our build times significantly. It gives less time for the builds to complete. This enables all the error messages easier to read.
Enables the AOT compiler on by default
The new IVY architecture, we see a significant change in the compiler’s performance. This means that the AOT builds will be noticeably faster. The change in the compiler and runtime would no longer require entryComponents and ng-serve. These components in Angular 9 will compile automatically depending on their usage.
Selector-less directives in Ivy
Selector-less directive as base classes were already supported in the old ViewEngine but were missing in the Ivy preview in Angular 8. This has now been added to Angular 9 know more about IVY.
Improved Internationalization (i18n)
Internationalization is an important Angular 9 feature. The new solution appears with Angular 9 which balances most of the drawbacks without losing performance. Initially, the latest @angular/localize produced on building, followed by a translation of texts consolidated in a copy and Ivy makes it easier to carry out the whole process.
The Phantom Template Variable Menace
Initially, phantom variables were not cited in the template’s associated component. Creating these phantom variables can usually threaten our applicatoins. With Angular 9 one gets a compiler error when a template variable is created that has not been defined in a component.
More reliable ng update
The ng update performs a basic update to the current stable release of the core framework and CLI by running the following command. Further updates have been made to this to make it more reliable and informative. The updates will now use the latest CLI and take advantage of newer updates automatically. It will also give updates and information about each migration.
This new angular 9 feature also comes in with new — create-commits flag. When we run ng update — create-commits, the tool commits the state of our codebase after each migration to debug the changes made to the code.
API Extractor Updates
Angular dependes on many other services and libraries to function effectively which are usually difficult to maintain and update. In this new version, these libraries are tracked and updated using Bazel which deletes the API landscape of these libraries, produce reports, find out missing updates or new features and documents in such a way that they are communicated easily.
New options for ‘providedIn’
This angular 9 feature provides us with some additional options while create an @injectable service in Angular.
platform- makes the service available in a special singleton platform injector that is shared by all applications on the page.
any — provides unique instance in every module (including lazy modules) that instills the token.
Component Harness
Another Angular 9 feature is to offer an alternative way to test components. By disconnecting the implementation details, one can make sure that unit tests are correctly audited and less frail. Angular 9 is making harnesses available to any component author as part of Component Dev Kit(CDK). In Angular 9, changes have been made to compiler and runtime, and so we no longer need to identify this in the entryComponent array. Angular will find the component by its own. However, Angular will not remove the component from entryComponent array by itself for us. Hence we need to search our code after updating and manually remove them and then test.
IDE and language service improvements
With Angular 9, another significant improvement is made to Angular language service extension on the Visual Studio Marketplace. The Angular Essentials extension includes a set of useful extensions to build up the development experience with Angular. One such code is Angular Language Service, which adds a lot of features to VS Code. This helps us write Angular code. Other extensions include useful Angular snippets. ESLint, and debugging extensions. Along with increased performance and stability issues, many long standing bugs have been fixed in this Angular 9 feature.
