What's New in Angular 10 Features & Updates

    Saturday, June 27, 202010 min read37272 views
    What's New in Angular 10 Features & Updates

    Angular version 10, has been released on the 24th of June, 2020 but with the beta version this time. This can mean that we are nearing the final release of the newest version of the google-developed, typescript based framework. This is a major release however this latest angular version will majorly focus on the ecosystem and quality tools rather than introducing new features. This could mean that we are going to witness a lot of deprecation and upgrades.

    The angular team launched its version 9 in February that has paved the way for the new version. Ever since the last release, everyone has been keeping close tabs for the launch of the new release. Angular 9.1 that was released early in the month of April, promises some of the minor updates from version 9. While version 9 highlights the default IVY renderer and internationalization, angular 9.1, includes the support for TypeScript 3.8, performance improvements, and a long list of bug fixes.

    Angular 10 features a new date range picker in the Angular Material UI component library and warnings for CommonJS imports. The speed with which Angular releases picking up is good enough to convince any angularJS development company to keep up with the latest upgrades. 

    In this blog, we are determined to highlight the features of Angular 10 and the effect it has on the entire angular ecosystem. Let's dive into what's new in Angular 10.

    Features of Angular 10

    Angular 10


    1. Language Service

    The language-service-specific compiler enables multiple typecheck files by using the project interface which creates ScriptInfos as necessary. Autocompletion is also seemed to have been removed from HTML entities, such as &, <, etc., so as to safeguard the inhouse core functionality of Angular LS, which holds questionable value and a performance cost.

    2. New Default Browser Configuration

    Browser configuration for new projects have been updated to outdo older and less used browsers. This includes the side effect of disabling ES5 builds by default for new projects. One simply has to add the required browsers in the .browserslist RC file.to enable ES5 builds and differential loading for browsers.

    3. Compiler Update

    In the latest angular version, a compiler interface has been added in order to wrap the actual ngtsc compiler. Angular version 10 has added name spans for property reads and method calls. In addition to this Dependency information, ng-content selectors, Angular Language Service have also been added to the metadata.

    It also welcomes the propagation of the precise cost span in an Expression Binding of a micro syntax expression to ParsedProperty, which, in turn, might propagate the span to the template ASTs (both VE and Ivy).

    4. Optional Stricter Settings

    Angular version 10 offers a more strict project setup in order to create a new workspace with ng new.

    ng new --strict

    Once this flag is enabled, it initializes the new project with a couple of new settings that improve maintainability, assist in catching bugs well ahead in time, and permit the CLI to perform advanced optimizations on your app. Enabling this flag configures the app as side-effect free to ensure more advanced tree-shaking.

    5. Ngcc

    With this angular 10 feature, there has been an implementation of a Program-based entry-point finder, which is designed to only process entry points that can only be reached by a program defined by a tsconfig.json file.

    By using this option, one can catalyze the process in places with a number of dependencies installed with relatively small numbers of entry points that are actually imported into the application. This particular feature helps manifest and reduce the file size of the entry-point.

    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.

    hire angular developers


    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:

    ng update @angular/cli @angular/core


    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

    Related articles