Angular was developed by Google as a platform for building mobile and desktop web apps. It has evolved into a comprehensive development framework with all the essential tools and components for a web app development. Recently, Angular has released it’s 9.0 version, and it is a significant release that spans the entire platform, including framework, Angular Material, and the CLI. This version is more about changes to the framework instead of the codes.
In this preview article, we are going to take you through the top 10 new features in the latest version of Angular ‘9’ that makes it greater than earlier versions.
What we will discuss in detail includes:
1. Default Ivy Compiler
2. Support for Typescript Diagnostics format
3. Better Debugging experience
4. Component Harness
5. Faster Mobile Apps
6. Small Bundles and better performance
7. Modified Internationalization (i18n)
8. IDE and language service improvements
9. API Extractor Updates
10. Modified CSS Class and Style Binding
Let’s discuss these Angular 9 features in detail. Continue reading!
1. Default Ivy Compiler
Finally, the much awaited and essential feature in Angular 9, Ivy compiler, is available now in the latest update. Ivy is the code name for Angular’s next-generation compilation and rendering pipeline. It will be the default feature for all Angular 9 users, which itself ensures angular apps built with Ivy are faster and efficient enough. While comparing angular 8 vs angular 9, you no more need to add compiler options in the tsconfig.json file to enable Ivyin new version.
2. Support for TypeScript Diagnostics Format
Earlier the Angular Compiler was generating both native TypeScript diagnostics as well as its own internal API diagnostics. However, it is beneficial after a new update of Angular as none of these was implemented in ALP diagnostics. Now, Angular 9 will simplify the process by converting all Angular TypeScript Compiler (ngtsc) diagnostics to the same TypeScript Diagnostic format, instead of supporting numerous formats.
The new update of Angular is also going to keep apps from running into potential binding issues by using the schema registry to check DOM bindings. Also, there’s a perk, to support the generation of highly descriptive error messages, consistent template diagnostics will be used.
3. Better debugging experience
IVY compiler and runtime have a feature known as debugging, and it is a task for developers to develop an utterly bug-free program. Hence, it was essential for Angular to update the codebase with tools and techniques to make it easier to flesh out the bugs themselves.
Angular 9 framework has come up with a few unique tools and techniques to debug their applications which includes –
You can manually call methods and update stats.
You can use ‘applyChanges’ to trigger change detection.
When you ask Angular can give access to instances of the directives and components.
4. Component Harness
Previously the testing component has relied on using implementation details such as CSS selectors to find any component and to trigger events as well; it was troubling the developers while testing components by making it necessary to update all those tests which rely on those components after changing the implementation of the component’s library.
However, Angular has solved this issue with the component harness, which is an updated feature its version 9, and you no longer need to identify this in the ‘entryComponents’ array. Now, it is updated to offer an alternative way to test components. You can ensure that your unit tests are correctly scoped and less brittle by abstracting away the implementation.
You can do most tests of most of the Angular material’s components with the help of the component harness. Angular 9 makes the component harness available to any component author as part of the Component Dev Kit (CDK).
5. Faster Mobile Apps
Due to the significant rise in the internet, mobile phone users have increased globally. It has also been proven that half of the website traffic — fetch by mobile phones. It happens because phones are handier to use than other devices anywhere. Hence, to provide a better experience to mobile users, developers of Angular 9 have redesigned and decreased the size of the file to download it easily.
6. Smaller Bundles and Better Performance
In Angular, the Ivy compiler has been designed to remove parts of Angular that aren’t being used via tree-shaking and also to generate less code for each Angular component. In earlier versions of Angular, the file size of the app was a constant issue.
Now, with this updated version of Angular, small apps, as well as the large apps, can see the most dramatic size savings. Besides, with these improvements, in Angular 9, the small apps that don’t usually use many Angular features will be benefited most from tree-shaking. Large apps that have many components will also be benefited most from the reduced factory size.
However, medium-size apps may see bundle sizes that are on par or slightly smaller. The reason behind it, they benefit less from tree-shaking and also don’t have enough components to leveraging smaller factories truly.
7. Modified Internationalization (i18n)
Angular as a JavaScript framework has long supported Internationalization, as it helps you to generate standard codes with the Angular CLI; these codes help in creating translator files to publish an application in multiple languages. Internationalization has been a core feature for Angular users, and in its version 9, they have made it faster by improving the build-time i18n substitutions later in the build process. It balanced out most of the drawbacks while maintaining the performance.
Earlier it was only producing one building, which was followed by a translation of texts consolidated in a copy. Still, now Ivy makes it easier to carry out the whole process together.
8. IDE and Language Service Improvements
It is one of the significant features of Angular 9, and it is made to the Angular language service extension on the Visual Studio Marketplace. Many long-standing bugs along with major architectural overhaul to address performance and stability issues have been fixed in version 9 of Angular.
If you want to build up the development experience with Angular, then this essentials extension has a set of useful extensions. Angular Language service is one of them that adds a lot of new features to the VS Code, and it will help you to write your code. Features such as TextMate grammar for Angular Template Syntax and NgModule have also been updated.
#9. API Extractor Updates
Angular depends on many other services and libraries to function effectively because of being a holistic framework. However, there was a problem in keeping up with updates for all these libraries and services. All these libraries will be tracked and updated via using Bazel support which detects the API Extractor of these libraries, produces reports, finds out any missing updates, and documents them in an easier way that they are communicated easily in the newest version of Angular. It will make it easier to handle maintenance, as well as keep everything updated.
10. Modified CSS Class and Style Binding
The Ivy Compiler and runtime improves handling styles as in previous versions of Angular; if an application contained a competing definition for a style, then those styles would replace each other destructively. With this updated version of Angular, you can predictably manage styles; through a consistent order of precedence, and it is not dependent on timing in any way. Also, most specific styles always have the highest precedence.
That’s all, folks!
You can see there are so many new updates with this new version of Angular; we have tried to cover the top 10 new features of Angular 9 that make it more significant than earlier versions. As new features, we have faster native mobile apps with angular, API extractor; also, Angular Ivy is providing modified Internationalization, you name it!
The Angular team has done a great job in this update so that us developers can reap out the benefits from Angular 9.