What's New in Angular 10 Features & Updates

The base path of the package and entry points need not be stored in the file, and hence Storing unnecessary empty arrays can be avoided. In the previous versions, ngcc seemed to parse the files of the entry point in order to compute dependencies. This would take a lot of time for large node modules.

6. Performance Improvements

One can see improvement in the performance that is achieved by reducing the size of the entry point. In addition, caching of dependencies is executed within the entry point manifest and are read from there as opposed to being computed each time. Previously, even though an entry point did not need processing, ngcc (Angular Ivy compatibility compiler) might parse the files of the entry point to compute dependencies, which might take a whole lot of time for large_node modules.

The computation of basePaths has been made lazy in order to improve performance. What previously was done whenever the finder was instantiated is now only done if needed in TargetedEntryPointFinder.

7. Service Workers

In the previous versions of angular Vary headers might have been taken into consideration while retrieving resources from the cache, however absolutely stopping the retrieval of cached assets and main to unpredictable behavior due to inconsistent/buggy implementations in various browsers.

However, in angular version 10 Vary headers are overlooked while retrieving sources from the ServiceWorker caches, which can result in sources being retrieved even when their headers are not similar. If your application needs to differentiate its responses based totally on request headers, it is important to ensure that the Angular ServiceWorker is configured to avoid caching the affected resources.

8. Typescript 3.9, TSLib 2.9 & TSLint v6

Angular 10 features typescript 3.9. As opposed to the previous version which supported typescript 3.6, 3.7 and even 3.8. Typescript is a language that builds on JavaScript by adding syntax for type declarations and annotations which is used by the TypeScript compiler to type-check our code. This in turn clean readable JavaScript that runs on lots of different runtimes.

Typescript helps save the files with its rich editing functionality across editors. With Typescript 3.9 the team has worked on performance, polish, and stability. Apart from error-checking, this version powers things like completions, quick fixes and speeding up the compiler and editing experience.

Let's have a look at some of the exciting features of Typescript 3.9:

• TSlib, the runtime library for TypeScript consisting of helper functions, has now been updated to TSlib 2.0. Along with this there is an upgrade on the TSLint static analysis tool for TypeScript to version 6.
• The // @ts-expect-error comments before a code line as a prefix, so that the TypeScript won’t report the error. Typescript will show ‘Unused '@ts-expect-error' directive if there isn't any error.
• Angular 10 also has deprecated the inclusion of ESM5 or FESM5 bundles which saves 119MB of download and install time while running yarn or npm install for Angular packages and libraries. With angular version 10 TypeScript automatically detects the types of imports that are used to keep any type of files style clean. Any downleveling to support ES5 in this version will be done at the end of the build process.
• Complications with functions like ‘Promise.all’ and ‘Promise.race’ have been sabotaged and the 3.7 version has now been fixed.
•  With the latest versionTypeScript provides a quick fix solution to add missing return statements in cases where one might forget to return the value from a function at the end of that function.
• "}" and ">" are now considered invalid JSX text characters with the typescript new version.

9. Localization

One of the best features of Angular 10 is that the latest angular version supports for merging of multiple translation documents which could only load one file in the previous versions.

Now customers can specify a couple of documents in keeping with locale, and the translations from each of these documents can be merged together by means of a message ID. In practice, this means you need to put the documents so as of most essential first, with fallback translations later.

10. Router

The CanLoad guard now can go back Urltree in angular version 10. A CanLoad guard returning Urltree cancels the cutting-edge navigation and helps to redirect. This matches current behavior to the available CanActivate guards that are also apparently added. This however doesn’t affect the preloading. Also, any routes with a CanLoad guard won’t be preloaded, and the guards will not be completed as a part of preloading.

11. Deprecation

Angular 10 features typescript 3.9. As opposed to the previous version which supported typescript 3.6, 3.7 and even 3.8. Angular 10 also has deprecated the inclusion of ESM5 or FESM5 bundles which saves 119MB of download and install time while running yarn or npm install for Angular packages and libraries. any down leveling to support ES5 in this version will be done at the end of the build process.

We will also see a deprecation of older browsers including IE 9, 10, and Internet Explorer Mobile that are Based on heavy consultation with the community.

Breaking Changes

Logic is updated pertaining to formatting day periods that cross midnight, in order to match the time within a day period that extends past midnight. Applications that are using either formatDate() or DatePipe or the b and B format codes are likely to be affected by this change.

Another point under this section is that any resolver that returns EMPTY will happen to cancel navigation. In order to enable any navigation, developers will have to update the resolvers to update some vale, such as default!Empty.

Angular NPM in version 10 does not contain positive jsdoc remarks to assist the Closure Compiler’s advanced optimizations. Support for Closure Compiler in applications has been experimental and damaged for a few times. For people who will make use of Closure Compiler is likely higher off absorbing Angular applications built from sources directly rather than ingesting variations posted on NPM.

As a transient workaround, customers can not forget the usage of their present-day build pipeline with Closure flag --compilation_level=SIMPLE. This flag will ensure that the build pipeline produces buildable, runnable artifacts, at a cost of accelerated payload size because of advanced optimizations being disabled.

Core

Among all the features of angular 10, this is quite an interesting one. All the warnings will be now logged in as errors. This will obviously not break an app, but it might game up the tools that expect nothing to be logged via console.error. Generic is made to be mandatory for ModuleWithProviders in this new version, in order to work with the Ivy compilation and rendering pipeline. This ensures that if a developer is using View Engine, no build error will be issued. In this case, ngcc won't be able to help and the migration might just cover the application code.

Bug Fixes

With this Angular 10 version, there have been a number of bug fixes, this includes the compiler avoiding undefined expressions in a holey array and the core avoiding a migration error while a nonexistent symbol is imported. Another bug fix ensures proper identification of modules affected by overrides in TestBed.

Converting pre-Ivy code

All the pre-Ivy dependencies from npm should be transformed to Ivy dependencies, which is supposed to take place as a precursor to running ngtsc at the application. Further, all future compilation and linking operations ought to be made in the direction of transforming versions of the dependencies.

How to update to version 10

In order to upgrade to Angular version 10, one can use this command:

For more information, check this guide on how to update Angular to the latest version

Conclusion

Ideally, the Angular team releases two versions in a year. The earlier version, version 9 was released just four months ago, and hence the team is already looking to release Angular 11 in the fall. For people looking out to hire angular developers for their projects, it is important to look out for a reliable and trusted partner to team with, which will ensure a smoother path ahead.

Read More: Version 11 of Angular Now Available with typescript 4.0, webpack 5 & more