Side By Side Comparison Between Angular 10 vs Angular 11

    Wednesday, December 23, 202018 min read35104 views
    Side By Side Comparison Between Angular 10 vs Angular 11


    The growth of web and mobile app development has left a revolutionary impact in various domains of life. Web and Mobile applications have become an important part of our lives. As much as our personal life revolves around applications, so does our professional life. Applications have made their way in business sectors and are inducing great amounts of profit out of it. This revolutionary change has led companies to look for a better option for building mobile & web apps with faster speed & fewer resources.

    Angular is a javascript framework that is written in typescript. It was developed by Google and launched to decouple an application’s logic from DOM manipulation. It is popular as a “Superheroic JavaScript MVW Framework”  for the powerful and amazing features that it has. It was initially known as AngularJS, worn out by its second version Angular that was released in 2016. The powerful features help developers to create some rich, high-performance applications easily.

    The simple tools make it work seamlessly together, making the development process smooth and efficient. Since it is developed by Google, it is likely to stick around for some time. Every angularjs development company prefers this framework over others for their front-end web applications. 

    Comparison between Angular 10 vs Angular 11

    The Angular community has always been determined to keep maintaining and upgrading the versions with each passing day. Angular 10 was released on the 24th of June, 2020. The current version, Angular 11 is the new version as a production release. In this blog we will discuss the comparison between Angular 10 vs Angular 11, its features, performance results, code examples, etc. let's have a look at it:

    What's new in Angular 10

    Angular 10 features


    Angular 10 was released on the 24th of June, 2020 with the beta version.  This major release of the latest Angular version is going to focus on the ecosystem, quality tools, and the core structure in its entirety, rather than focus on new features. This determines that this version will have a lot of deprecation and upgrades.

    Angular 9, which was released in February has paved the way for this version of the google-developed, typescript-based framework. when compared between Angular 10 vs Angular 11, Angular 11 is bigger in size as they have introduced new features rather than working on just the ecosystem. Let's Have a look at the features:

    Language Service

    Angular 10 comes with the language-service-specific compiler that enables typecheck files to create ScriptInfos as necessary. Angular 10 has also negated the use of Autocompletion from HTML entities, such as &, <, etc., for safeguarding the inhouse core functionality of Angular LS supporting the questionable value and a performance cost. 

    Compiler Update

    The latest Angular version has added a compiler interface that wraps the actual ngtsc compiler. There are some additional features to the metadata like the Dependency information, ng-content selectors, Angular Language Service. These features propagate  the precise cost span in an ExpressionBinding of a micro syntax expression. 

    New Default Browser Configuration

    New Angular 10 feature that it uses browser configuration for all the new projects outdoing the old ones. Users will only have to add the required browsers in the .browserslist RC file which will enable ES5 builds and differential loading for browsers. 

    Optional Stricter Settings

    Angular version 10 provides a more strict project setup for making another workspace with ng new. Once this flag, “ng new --strict” is enabled, it begins the new undertaking with new settings that will help in maintaining and assisting in order to catch bugs well ahead in the development process.

    hire angular developer

    Ngcc

    The usage of the A Program-based entry-point finder in Angular 10 helps the entry-point finder to reach a program that is characterized by a tsconfig.json record. This choice catalyzes the cycle in places that are introduced with a relatively small number of entry points brought into that application. Consequently, this helps in manifesting and reducing the file size of the entry-point.

    Performance Improvements

    Angular 10 has witnessed a reduction in the size of the entry-points, leading to an improvement in performance. The caching of the dependencies and the calculation of basePaths further aids in improving the performance.

    Typescript 3.9, TSLib 2.9 & TSLint v6

    This is one of the significant features comparing Angular 10 vs 11. As opposed to the previous version of Angular 9, which utilized typescript 3.7, Angular 10 has been moved up to Typescript 3.9 where the community has dealt with performance, polish, and stability. Error-checking, completions, quick fixes, accelerating the compiler, and altering experience are some of the important elements that  Typescript 3.9 gives. Additionally, Angular 10,  has been moved up to work with TSLib 2.9 and TSLint v6.

    Localization

    Angular 10 performance improvements include the merging of multiple translation documents by methods for a message ID, which was previously done for one file in angular 9.

    Service Workers

    Angular 10 ignores the Vary headers when the sources from the Service Worker stores are recovered when their headers are not similar.  In case any application needs to separate any reactions, it turns out to be significant to guarantee that the Angular ServiceWorker is arranged to avoid caching the affected resources.

    Deprecation

    Angular 10 has witnessed a couple of deprecations like typescript 3.6 and 3.7, the incorporation of ESM5 or FESM5 packs, and the deprecation of ESM5 or FESM5 bundles. The community has also seen deprecation of older browsers including IE 9, 10, and Internet Explorer Mobile. The deprecation of ESM5 or FESM5 bundles has helped Angular 10 to reduce 119MB of download and install time while running a yarn or npm introduction for Angular bundles and libraries. 

    Core

    Angular 10 has now logged in all the warnings as errors,  without breaking the app. Generic is made compulsory in Angular 10 for ModuleWithProviders to work with the Ivy gathering just as delivering pipeline, guaranteeing that if an engineer is utilizing View Engine, then no build error is going to be issued. 

    Converting pre-Ivy code

    The pre-ivy conditions in Angular 10 support changes in the ivy conditions. This helps the royal residence to be accepted as a forerunner for running NTSC at the application level. All the compilations in the future, as well as the linking operations, should be made in light of a legitimate concern for changing versions of dependencies.

    Read More: What is the difference between angular 9 and angular 10?

    What's new in Angular 11

    Angular 11 features


    Angular 11 released on 14th November 2020.  It is the newest and the latest version of the Google-developed web framework as a production release. The major features of this version are router performance improvements, automatic inlining of fonts and stricter types. Let's have a look at the deprecations and breaking changes and more features of Angular 11. 

    Updated Hot Module Replacement (HMR) Support

    Angular 11 features Hot Module Replacement mechanism that lets the modules to be replaced without a full browser refresh.  It is an old idea for Angular developers where the team has worked with HMR in the previous versions. One of the new features of Angular 11 is that it supports HMR with required configuration and changes in code that make inclusion of Angular less ideal. With HMR the changes to components, styles, and templates are instantly updated into the running application without having to refresh the full page. 

    Updates on Operation Byelog

    The Angular team has invested some significant engineering effort on Operation Byelog where they focussed on the triaging issues and PRs and having a better understanding of the extensive community needs. With Angular 11, All the issues have now been effectively triaged in every one of the three monorepos that continue with the new issues that get reported This process also helps with the few popular concerns in the router and forms as well. The issues in Angular 11 will be triaged within 2 weeks of the occurrence, reducing the size of the Angular backlog. 

    Automatic Inlining of Fonts

    Angular 11 features automatic font inlining that occurs every time users set a flag in the angular.json. Angular inlining helps the Google Fonts to convert in a way that inlines the index HTML.  The inline fonts get downloaded in the Angular CLI during compile time that are being used and linked in the application. The features of Angular 11 take advantage of the default optimization for the build to run on the CI whenever the internet is available.

    Component Test Harnesses

    The Component Test Harnesses gives a powerful and clear API surface that assists with testing the Angular Material components. It gives an approach to developers to communicate with Angular Material parts by utilizing the upheld API while testing. This feature was first introduced in Angular 9.  The difference between Angular 9 and Angular 11 with the Component Test Harnesses is that Angular 11 comes with a parallel function, performance improvements, and new APIs. The manual change detection function, helps the developers to disable the automatic change detection in unit tests as well as access the finer-grained control of change detection.

    Updated Language Service Preview

     The Angular Language Service in Angular 11 provides helpful tools for developing productivity and fun within the Angular environment. The current type of language administration relies upon View Engine that gives all the more impressive and precise experience for developers.  Angular 11 changes the standard for the language administration to accurately infer generic types in templates just like how the TypeScript compiler does. This feature being still in development gives a new more powerful and accurate Ivy-based language service.

    Faster Builds

    The faster development and build cycle in Angular 11 has brought updates into some key areas, which are, Ngcc - the Angular compiler and TypeScript v4.0. Angular 11 introduces the  ngcc update process in a 4x faster process so that users will have to spend relatively less time waiting for the builds and rebuilds to complete. While profiling the Angular compiler, the Angular contributor Joost makes the Typescript compiler faster for improving the Ngcc preparing the Angular environment for Typescript 4.1, which will get faster builds.

    Experimental Webpack 5 Support

    Angular 11 supports the use of webpack that incorporates countless documents into a single bundle. Webpack 5 is the latest version that was delivered several months back. It actually needs an ideal opportunity to be steady. Right now, one can explore differences regarding module federation. This webpack v5, later on, will make the way for Faster builds and disk caching as well as Smaller bundles with cjs tree-shaking. 

    Moving to ESLint

    Angular 11 performance improvements support deprecation of the use of TSLint and Codelyzer which have been shipping a default implementation for linting in the previous versions.  It is one of the most important changes in Angular version 11.  Angular developers seem to deprecate the use of the TSLint and instead recommend migration to ESLint. The Angular developers have ensured a smooth transition by collaborating to the supported linting stack.

    Router

    The major Angular 10 vs angular 11 difference revolves around the use of the router. In the earlier versions, while utilizing the RouteReuseStrategy #shouldReuseRoute strategy, there was a worry with respect to future and next courses being exchanged for child courses. This issue is fixed in Angular 11, with new parameter types that will allow a variable of type NavigationExtras to be passed in. However, they don't let the object literals to pass in as they specify known properties and types only that don't share properties for all intents and purposes with the ones in the Pick.  This issue can be fixed by the users who can specify properties from the NavigationExtras 

    Forms

    The amendments made in Angular 11 have improved the typing for validators and asyncValidators that were earlier not available. Type of AbstractFormControl.parent in Angular 11 incorporates null that is remembered for the sorts of .parent. Angular version 11 migration adds the non-null assertion operator wherever it's required.  The async validators in The FormControl, FormGroup and FormArray class that were initially defined at the initialization time are now emitted into the statusChanges observable. 

    contact us

    Angular 10 vs Angular 11: Deprecations and Breaking Changes

    • One of the major highlights in the comparison between Angular 11 vs Angular 10 is the typescript support. Angular 10 supported Typescript 3.9, however, Angular 11 has dropped the support for TypeScript 3.9 and only supports TypeScript 4.0.
    • The roadmap has been updated as one of the new features of Angular 11 to provide early feedback that is to be incorporated into the final release. 
    • Angular 11 also has dropped the support for IE 9, 10, and IE mobile. The difference between Angular 10 and Angular 11 with the use of  IE 9, 10, and IE mobile is that Angular 10 only deprecated the use, but Angular 11 has completely discontinued. 
    • Angular 11 has fixed the typing for date and number pipe that Angular 10 used to take any type as input.
    • The async pipe is not going to return as a value for an undefined input in Angular 11. It is still a breaking change however, actually uncovers invalid usages.
    • CollectionChangeRecord in Angular 11 has been deprecated, users will have to use IterableChangeRecord as in the previous versions
    • Angular 11 has deprecated the use of the ViewEncapsulation.Native. Users can update the existing pages by using ViewEncapsulation.ShadowDom.
    • Angular 10 does not contain the positive jsdoc remarks from the NPM for assisting the advanced optimization of a closure compiler. 
    • Another difference between Angular 10 vs Angular 11 is that Angular 11 has enabled all the strict checks that had a flag generating the angular application.

    Read More: 20 Best AngularJS Development Tools For Developers 2021

    Conclusion:

    In the study of Angular version 10 vs Angular version 11, we have learned the differences in their performances, the deprecation and up-gradation in existing features that change the core structure of the framework.  With the rising popularity of the framework, we are expecting a beta version around spring.

    Angular 10 Angular 11
    Typescript 3.9 Typescript 4.0
    Enabled ES5 builds  Faster Builds 
    Language-service-specific compiler Ngcc compiler
    Optional Stricter Settings
    Webpack 5 Support
    Converting pre-Ivy code
    Automatic Inlining of Fonts
    TSLint v6
    Migration to ESLint
    Deprecation of ESM5 or FESM5 bundles Deprecation of  IE 9, 10, and IE mobile
    Recovered Service Worker stores  Clear API surface
    Updated to TSLib 2.9 Updates on Operation Byelog
    New Default Browser Configuration Updated Language Service Preview

    Read More: Angular 11 vs Angular 12 : Key Differences Developers Perspective

    Related articles