Why Should You Migrate To Angular 10

Hello to all curious coders! After the Angular 9 release was considered to be the super cool update, Angular 10 is now released. And with Angular Version 10, the question arises as always: Is the update worth it? In this article, we'll look at what Angular 10 has brought with it and give tips for the Angular migration.

In contrast to Angular 9, the Angular 10 release is smaller. But that shouldn't come as a surprise either, since Angular 9 introduced Ivy as a completely new rendering system and made it has the new standard.

In advance it can be said: As always, there are TypeScript updates and bug fixes, so an update is simply advisable. Anyone who is still using older Angular versions (for example Angular 4 or Angular 6) and thought that constant updating is a lot of work, listen up: large version jumps are associated with more risk and effort than continuous smaller updates to go. 

 If you want to perform Angular migration of the app from version 8 to version 10, you should first upgrade from version 8 to version 9. All errors, tests, etc. should then be fixed there in order to then update to version 10. So let's take a look at what has happened since Angular 9.0.

 

Angular 10: New features in TypeScript

TypeScript 3.8 was already updated with Angular 9.1. For Angular 10 the Typescript version has been raised again, version 3.9 of Typescript is now used.

 In the update to TypeScript 3.8, the option to use ECMAScript Private Fields in Typescript has already been added. ECMAScript private fields can be used as variables that are clearly assigned to the scope of a class and can only be used within this class. The new private fields are part of the current ECMAScript specification. In contrast to normal private variables, they retain their scoping properties even after transpilation from TypeScript to ECMAScript or Javascript, and these operations are made in the browser.

The update to TypeScript 3.9 contains a few improvements to make development with editors such as Visual Studio Code or Sublime Text 3 more pleasant.

With the new TypeScript version, however, there are also a few breaking changes. These are essentially based on more precise, sometimes stricter type checks. For example, type checks for intersection types in connection with optional fields have become stricter.

 

Angular CLI

In Angular 10, in addition to the mentioned update to TypeScript 3.9 and the solution style tsconfig, the version of the test runner Karma has also been raised to version 5.0.0. In addition, the --strict configuration option, which was added in version 9, has been extended in Angular CLI 10. If a project is created in strict mode, in addition to stricter type checks and linting rules, coding rules are also introduced to improve optimization. 

If side Effects is set to false, this is an indication to bundling tools (Webpack) that all code within and below this directory does not contain any “non-local side effects”. Non-local side effects occur when a TypeScript or JavaScript module doesn't only make code available via export, but also makes changes to the global scope. Code that contains such side effects has a negative impact on tree shaking. 

In the new Angular CLI version, the maximum values ​​for the bundle budget are also stricter. Budgets can be used to control how large the bundles created in the build can be. The resulting attention for bundle sizes should certainly contribute to the fact that developers are more concerned with the possibilities of optimizing Angular applications and thus achieve loading times that are optimized for users. Possible solutions can be the use of lazy loading and better structuring of the Angular application.

In Angular 10, CLI and build options in particular were removed that were previously deprecated. These include ng set and ng get, which have been replaced by ng config. The --profile build option could previously be used to profile the CLI build process. This has now been replaced by the environment variable NG_BUILD_PROFILING.

 

Angular material

There were also some innovations in Angular Material. The component library that implements Google Material Design for Angular is often used to implement typical applications with Angular and is enjoying growing popularity. In addition to a basic application framework and components that are typically often required in web applications, there are of course components for integrating Google services such as YouTube and Google Maps.

Google provides its own team that continuously maintains and further develops Angular material. So it's no wonder that Angular Material also has some innovations for the

Angular 10 release. Incidentally, the new 10 version of Material is called ice-dice - in keeping up with the summer.

With Angular Material Version 10, a completely new component has also been added: the much-requested date-range picker, with which not only a date, but a period can be selected.

 

Angular compiler

The speed of the Angular Compiler was already significantly optimized with Angular 9.1. In addition, the parallel processing of packages by ngcc has been improved, so that the npm postinstall step for parallel Ivy compilation of the dependencies, which was recommended up to then especially for faster CI builds, is no longer required.

A new compiler feature extends the generated metadata with information about dependencies and <ng-content> selectors. This improves the help that the language server and all tools based on it can offer for the developer. With Angular 10 there are further bug fixes and improvements to the ngcc, such as improved robustness in handling the ngcc lock file.

The Angular router has been expanded so that a CanLoad Guard can now also return a UrlTree. This feature has already been available with CanActivate-Guard and can be used primarily to cancel an existing routing process and instead redirect it to another route.

With Angular 10 there are also some breaking changes, which are discussed in more detail in the following section.

 

Breaking changes

As described above, Angular 10 introduces the latest version of TypeScript.

The fact that Angular is becoming more and more modern is also noticeable in the Angular packages distributed via NPM. These adhere to the so-called Angular Package Format (APF). With Angular 10, the APF v10 is now also coming out. In this new version the so called “esm5” and “fesm5” files are no longer included. “Esm” stands for ECMAScript modules, the 5 refers to the ECMAScript version that is used by these modules. Therefore, “Esm5” stands for ECMAScript modules in ECMAScript version 5.

 

Router

 Breaking changes in relation to the router mainly affect the UrlMatcher and the resolver. The type of matcher now reflects the fact that the matcher can also return zero.

This must be taken into account especially if you use your own implementations of the UrlMatcher.

Angular route resolvers have been adapted so that they abort the current navigation process if they return an observable equivalent to the empty observable. This means that an observable that returns a completed event but no actual next value triggers a NavigationCancel event of the router.

 

Angular Core

While the generic type parameter had been necessary for Module With Providers in Ivy since its introduction, it was still optional in the ViewEngine. This has changed with Angular 10, the parameter is no longer optional. However, there will be an Angular migration that will automatically add this parameter in most places. If a library is integrated with the old renderer ViewEngine, in which the parameter is missing, this will now lead to errors until the library has been updated. A workaround for this is either to set the parameter skipLibChecks in the tsconfig to false, or to switch your own app to Ivy, since Ivy can use the metadata generated by ngcc.

If Angular encounters an unknown element, an error is now output via console.error instead of a warning. Although this behavior does not interfere with the app, it could lead to problems with libraries that respond to logging to console.error.

Previously, Angular packages contained special jsdoc comments used for optimization with the Google Closure JavaScript Compiler. However, the build results obtained with TypeScript 3.9 are incompatible with the current Closure Compiler version. Since the Angular Support for the Closure Compiler was previously experimental anyway, it has now been temporarily removed. 

 

Forms

Forms are part of every business application. With the template-driven and reactive forms, Angular offers two variants for implementing forms.

The number-type inputs are a special variant of forms. For reasons of compatibility with IE9, an Angular Form Change was triggered for these number inputs every time either an OnChanges or an OnInput event was triggered. This led to double valueChanges events in modern browsers. With Angular 10, value changes are now only triggered onInput. If an application continues to support IE9, a direct listener for the OnChange event must be registered in this case and the onChange () method of the NumberValueAccessor must be called manually. This must also be taken into account when working with old versions of Webdriver.

Validators are also part of the essential repertoire of forms. With the minLength and maxLength validators, unwanted validation errors could occur up to now. If the FormControl had values ​​without a numeric length property, for example 0 or false, a validation error was issued. This behavior has now been changed, the validators will only validate values ​​that also have a length property. To adapt code that was based on the old behavior, additional validators like in or requiredTrue should now be added.

 

Service workers

Service workers are essential to build progressive web apps (PWA).

Service workers make it possible to implement many properties that are important for modern apps. This primarily includes offline capability. So far, the Angular Service Worker has also evaluated the Vary header of HTTP responses for the purpose of caching. This could prevent the retrieval of cached assets and, depending on the browser, sometimes led to inconsistent behavior. With Angular 10, various headers are now ignored when fetching content from the service worker cache. If the application needs to be able to react to the header, the Angular service worker should be configured in such a way that it should not cache the corresponding resources. The resources that are not cached can be set in the ngsw-config.json belonging to the Angular service worker.

 

Conclusion

To summarize everything up, Angular 10 is a great release! You can already imagine one or the other developer who is not getting enough new features, for sure. On the other hand, the update to Angular 10 from Angular 9 can be done with extremely little effort and especially in large enterprise projects.

Popular posts like this

According to the latest B2B Content Marketing Report by CMI and MarketingProfs, 70% of B2B marketers produce more content than they did a year before. Due to information overload...
12.10.2017
A SaaS company inherently refers to Software As A Service or a company that hosts an application. In doing so, you’re making this application available to interested users all...
18.07.2017