What are the new improvements in Angular Version 10.1?
The angular community witnessed the release of the latest Angular version 10.1 on the 9th of September. Earlier this year we saw the release of the Angular 10 on the 24th of June, which led us to the final release of the newest version of the google-developed, typescript based framework. In February and again in April, Angular 9 and 9.1 were released with promising features default IVY renderer, internationalization, support for TypeScript 3.8, performance improvements, and a long list of bug fixes, deprecations, and upgrades.
Features of Angular 10.1
For every Angular development company , the highlights of Angular 10 revolve around its warnings for commonjs imports and new date range picker in the Angular Material UI component library, Angular 10.1 features some new quality message extraction tool, and performance improvement to the compiler. We are also going to witness a lot of bug fixes and upgrades in this version. Angular 10.1 is smaller than the previous versions of Angular. In this blog, we will highlight the features of Angular 10.1 to study its effect on the entire angular ecosystem. Let figure out what's new in Angular 10.1?
Infragistics Updates UI for Angular 10.1
The Angular data grid has witnessed new features and new theming capabilities as Infragistics announced Ignite UI for Angular 10.1. The new Material-inspired industry icons improve productivity for developers which helps in creating applications in the Angular framework.
Here are the few features that are in Ignite UI for Angular 10.1. The new theme for application design is based on Infragistics' own design system, known as Indigo. It is available in both light and dark options. It provides with two new palettes to the UI developers and designers for applying their applications. New filtering, sorting and editing capabilities have been added to the Angular tree grid and the hierarchical grid and components for more engaging and useful for end-users.
Angular 10.1 supports binding columns to properties in nested data objects that include new case-sensitive search capability along with updating the Angular Calendar and Date Picker components. The new Angular component features helps in managing and binding data that provides enhanced support for applications integrating calendars and scheduling. Angular Material Design is an unofficial subset of icons extending the official Material Design Icon that includes 260+ new Material-inspired icons distributed in 7 categories: Finance, Logos, Programming, Health, Content, Editor and Social Media.
Typescript 4.0
On August 20th, the TypeScript team officially released its 4.0 version. This is the most progressive version of the language, translator, and even their site to this date. And with the declaration came the list of updates, which shockingly for a significant version change, they weren't so many. They're significant changes require a lot of design work and a ton of coding hours by many individuals. Let’s get to the new features and list of the change, shall we?
Labelled Tuple Elements
This is a relatively smaller update which you can now label elements inside your tuples. A tuples is actually a list of pre-set structures where you know the type of every element. This change addresses while defining a function with a rest parameter, reads a function’s signature or even when reading the IDE’s tooltip, the actual intent for it is not entirely clear for that function.It is essential to improve the experience around tuple types and parameter lists for a stronger validation around common JavaScript idioms. Tuple types can be used for rest parameters wherever this is crucial.
Variadic Tuple Types
After knowing the concept of tuples we know that tuples now can have named elements as well. As they have a pre-set structure they can be used to define the rest parameter of a function. Variadic tuples give room for more flexibility by putting the rest parameter however we want. Variadic tuples can also define generic types that help in creating semi-defined tuples which provide more flexibility. With variadic tuples, the basic structure of the types can also be defined to extend them in order to add whatever extra we need into it. That is why Typescript 4.0 has labels to show a connection between parameter lists and tuple types
TypeScript 4.0, tuples types can now provide labels.
type Range = [start: number, end: number];
Class Property Inference from Constructors
With TypeScript 4.0, you can now use control flow analysis for determining the types of properties in classes whenever noImplicitAny is enabled.
The property is considered to potentially be undefined in places where paths of a constructor are not assigned to an instance member.
class Square {
// Previously: implicit any!
// Now: inferred to `number`!
area;
sideLength;
constructor(sideLength: number) {
this.sideLength = sideLength;
this.area = sideLength ** 2;
}
}
The property is considered to potentially be undefined in places where paths of a constructor are not assigned to an instance member.class Square {
sideLength;
constructor(sideLength: number) {
if (Math.random()) {
this.sideLength = sideLength;
}
}
get area() {
return this.sideLength ** 2;
// ~~~~~~~~~~~~~~~ //
error! Object is possibly 'undefined'.
}
}
Editor Improvements
The TypeScript compiler doesn't just power the editing experience for TypeScript itself in most significant editors – it additionally controls the JavaScript involvement with the Visual Studio group of editors and then some more. For that reason, quite a bit of our work centre around improving editorial manager situations – the spot you invest the greater part of your energy as a designer.
Deleting Only Optional Properties
Anything you need to erase with the delete operator must be optional. in such a case that you're planning to erase something, that something needs to determine by one way or another that it may be undefined at one point of the execution of your code, else you may begin to see unpredictable behaviour, which is actually something contrary to what we're attempting to accomplish by utilizing TypeScript in any case.
Compiler
The compiler as a new feature of Angular 10.1 has a new strictness option called strictInputAccessModifiers. If this is enabled, it will report an error while binding attempts for allotting to a restricted field on a directive or component. It is to be noted that this has to be enabled by default even if you have enabled strict templates. It serves as a breaking change if it's not enabled by default. The compiler also commits to improving the compilation performances and in future, it can be used by manually adding it to your application.
Recalling “Solution Style” TypeScript configurations
The CLI in Angular 10 had a feature to migrate to “Solution Style” TS configuration that was derived from the typescript 3.9. This was in turn not a great idea for big projects as it slowed down the compilation and tools along with several other issues which made the CLI team to revert these changes. Angular 10.1 features a new project with CLI where one will have to find a base tsconfig.json extended by the more specific ones, how it was before v10. In case you update the application by utilizing the ng update command, the changes introduced in v10 for you will automatically be reverted by the schematics.
i18n
This is one of the most interesting features of Angular 10.1. Until now, Angular was dependent on View Engine to extract the messages. One of the features of Angular 10.1 is that it will use the new extractor from @angular/localize now on for the same. The Ivy application might seem to work if you run ng x i18n in one of your applications. The Ivy extraction is said to become the default in the near future. This IVy flag also allows the CLI to extract messages passed to the $localize function in the TypeScript files and also allows several translations files per locale which merges the messages while building the app:
"i18n": {
"locales": {
"fr": ["src/locale/messages.fr.xlf", "src/locale/messages-2.fr.xlf"]
}
}
A warning message will be displayed if you have duplicated messages.
Build-ng-packagr Deprecation
The @angular-devkit/build-ng-packagr package in Angular 10.1 has been deprecated and has been replaced by the @angular-devkit/build-angular:ng-packagr builder. Once you remove it from your package.json, you will have to update the task in the angular.json config to @angular-devkit/build-angular:ng-packagr. However, Angular version 11 is said to have the automatic migration for the same.
Hot Module Reloading
The Hot Module Reloading features of Angular 10.1 is now supported by the CLI even when using the extractCss option. This feature, might be deprecated in Angular version 11.
Strict Applications
In Angular 10.1 a new compiler option strictInputAccessModifiers has been introduced which allows the CLI to be included in your tsconfig.json once you generate a strict flag application. It can however be added to your existing application.
Forms Angular 10.1 removed all the forms error messages from the production builds that are usually seen at the time of developing. In the previous versions, these messages were included in the final bundles, designed to guide the developers. These form bundles make our applications lighter by reducing the forms bundle by ~20%.
async() helper renamed
In this Angular 10.1 version, we see the deprecation of the testing helper function async which has now been renamed waitForAsync. The reason for this is to avoid the confusion of having a function named waitforasync() while having a JavaScript keyword named async, which is slightly similar. While the async() waits for all asynchronous calls, async only waits for the calls that are labelled as wait. It is easy to implement as you just have to simply replace it everywhere without any change in behaviour.
Angular 10.1 Updates and Improvements
Performance improvement in compiler CLI, Router and ngcc compiler tool
Performance improvement Added prioritizedGuardValue operator for optimizing CanLoad Guards.
Options have been included for absolute URL HTTP support.
Exposed canparse() diagnostics.
Reusable EntryPointManifest for loading entry point dependencies to avoid invocation every time while parsing.
Lifecycle hooks to be modified anytime before bootstrap.
New message extraction tool added that will be later integrated into CLI.
The LinkabablePackageInfo added to the ng-module in Bazel build tool allows proper link the ng modules targets in nodejs runtime actions.
Lightweight injection token to reduce the bundle sizes.
Conclusion
We have witnessed a few beta versions for Angular in the last 6 months, with new updates. Angular 9 , angular 9.1, angular 10 have stumped up the game with their upgrades and performances. By studying the new features of Angular 10.1, it is safe to claim the same commitment and convenience as its last counterparts. The next tentative update is going to be Angular 11 with interesting features and bug fixes. Let's see what Angular 11 has in store for us.