Comparison Between Angular 9 vs Angular 10

    Tuesday, July 14, 202011 min read44604 views
    Comparison Between Angular 9 vs Angular 10

    The growing popularity of mobile and web applications 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 was launched to decouple an application’s logic from DOM manipulation. It was typically known as a “Superheroic JavaScript MVW Framework” for the powerful features that it provides.

    These features enable the developers to create some rich, single-page applications easily. It has simple tools in use that work seamlessly together in tandem, making the development process much more efficient. Hence it becomes obvious for any Angular Development Company to prefer this framework over others for their front-end development. This further boosts the Angular community to keep maintaining and upgrading the versions with each passing day.

    Comparison Between Angular 9 vs Angular 10

    In this article, we are comparing Angular 9 vs 10, the features, and the by-products of this framework. However, let's begin with understanding the advantages of Angular and why do companies prefer this framework.

    Angular 9 Features

    Angular 9 New Features


     Angular 9 was launched in February that has revolutionized the approach of every mobile app development company. The last release had made everyone hoping for a new paradigm to begin. The month of June saw the launch of Angular 9.1 and with that everyone knew that the next version is just around the corner. Version 9.1 was mostly a beta version of Angular 9 and had come with improvisations and fixes. However, version 9 highlights a long list of features.

    IVY as a Default Compiler

    The default IVY compiler helps to perform better as it reduces the bundle size by 25-40 percent. Decreasing the size of the files also enables the developers to create apps that are user-friendly. IVY checks the bindings inside the layouts of any application and afterward reports any sort of problems that it finds. This aids in recognizing any of bugs prior to the development procedure. It at that point assembles the codebases with several techniques and methods to troubleshoot its applications. In Angular 9, the IVY deals with the style binding without being subject to any timings. Angular 9 keeps up the vast majority of the flaws without having to lose its performance.

    More reliable ng-update

    The ng update is the essential update to the current CLI framework that exploits the current updates automatically. This helps to give updates and data about any sort of migration.

    API Extractor Updates

    Angular relies upon different services and administrations that are hard to follow. In Angular 9 the API landscape of these different services and libraries enables locating the missing updates with the goal that they are imparted without any problem.

    New options for 'providedIn'

    In this angular 9 feature, we get certain options while creating services in Angular. 

    • Platform— The providedIn: 'platform' that makes the service accessible in a special single platform, is shared by all applications on the page
    • Any— It helps to provide a unique case in every module, imparting the token

    IDE and Language Service Improvements

    The Angular language service extension incorporates a lot of helpful augmentations for requests to develop the development involvement in Angular. The expansions incorporate Angular bits, ESLint, and troubleshooting augmentations. Alongside these performance and security issues have additionally been fixed.

    Updated to Typescript 3.7

    The typescript 3.7 was released in November 2019 and it gave a significant hit to Angular 9. The Angular 9 is upgraded to work with features like the Nullish coalescing and optional chaining of the Typescript 3.7. This element assists with remaining in sync with the environment.

    Component Harness

    Angular 9 gives elective approaches to test components to ensure that the unit tests are accurately examined and less fragile. Angular finds the components on its own. In angular 9 the compile and runtime has been aggregated and refreshed, and hence there is no longer a need to distinguish this in the entryComponents exhibit.

    The Phantom Template Variable Menace

    Previously, the phantom variables were not referred to in the template’s connected part. Building these apparition factors can typically undermine the applications. With angular 9, a compiler mistake appears, whenever a template variable is made that has not been described in a component.

    Read More: Angular 9 : New Features & Updates 2020

    Major updates in Angular 9

    • Selector-less directives that were already supported in the old version but were missing in the Ivy preview in Angular 8, have now been added to Angular 9.
    • The AOT build is supposedly faster ensuring a significant change in the compiler's performance.
    • With IVY we see an improvement in the build error that gives less time for the builds helping in reading error messages to be read easily.
    • In Angular 9, the system utilizes one of a unique strategies and devices to investigate its applications all by itself.
    • The ViewEngine in this angular 9 translates the templates and components into regular HTML and JavaScript that helps the browser to interpret and display them.

    Angular 10 Features

    Angular 10 New Features


     Angular version 10 is the final release of the newest version and this could be the final release of the newest version of the google-developed, typescript based framework. This version witnessed a lot of depreciation and upgrades. In the comparison between angular 10 vs angular 9, angular 10 is the smallest one as it majorly focused on the ecosystem and quality tools rather than introducing new features. Let's have a look at them.

    Language Service

    The language-service-specific compiler provides multiple typecheck files all in the interest of safeguarding the in-house core functionality of Angular LS holding questionable value and a performance cost.

    Compiler Update

     In angular 10 , the compiler interface is added for wrapping the actual ngtsc compiler. Dependency information, Angular Language Service, ng-content selectors are also an addition to the metadata, propagating the precise cost span in an ExpressionBinding of a micro syntax expression.

    New Default Browser Configuration

    The browser configuration for all the new projects will see an upgraded version outdoing the old ones, including the side effect of disabling ES5 builds by default for new projects.

    Optional Stricter Settings

    Angular version 10 provides a more strict project setup for creating a new workspace with ng new. Once this flag, “ng new --strict” is enabled, it starts the new project with new settings that will help in maintainability and assist in catching bugs well ahead in the development process.

    Ngcc

    With the implementation of the A Program-based entry-point finder in angular 10, the entry-point finder can only be reached by a program that is defined by a tsconfig.json file. This option catalyzes the process in places that are installed with a relatively small number of entry points imported into that application. Thereby manifesting and reducing the file size of the entry-point.

    Performance Improvements

    With angular 10, one can witness an improvement in the performance, as the size of the entry-points have been reduced. The caching of the dependencies and the computation of basePaths further helps in improving the performance.

    Typescript 3.9, TSLib 2.9 & TSLint v6

    This is one of the major highlights while comparing Angular 9 vs 10. As opposed to the earlier version which used typescript 3.7, Angular 10 has been upgraded to Typescript 3.9, where the team has worked on performance, polish, and stability. Error-checking, completions, quick fixes, speeding up the compiler and editing experience are some of the services that Typescript 3.9 provides. Angular 10 has also been upgraded to work with TSLib 2.9 & TSLint v6.

    Localization

    angular 10 supports merging of multiple translation documents by means of a message IDwhich was earlier done for one file in angular 9.

    Service Workers

    Angular 10 overlooks the Vary headers when the sources from the Service Worker caches are retrieved, when their headers are not similar. In case any application needs to differentiate any responses, it becomes very crucial to ensure that the Angular ServiceWorker is configured in order to avoid caching the affected resources.

    Deprecation

    Angular 10 has seen a few deprecations like, typescript 3.6 and 3.7, the inclusion of ESM5 or FESM5 bundles, as well as deprecation of older browsers including IE 9, 10, and Internet Explorer Mobile. The deprecation of ESM5 or FESM5 bundles, helps save 119MB of download and install time at the time of running a yarn or npm install for Angular packages and libraries.

    Core

    All the warnings are now logged in as errors without breaking the app. Generic is made mandatory in Angular 10 for ModuleWithProviders to work with the Ivy compilation as well as rendering pipeline, ensuring that if a developer is using View Engine then no build error will be issued.

    Converting pre-Ivy code

    The pre-ivy dependencies are supposed to be transformed to ivy dependencies. This will take the palace as a precursor for running NTSC at the application level. All the compilations in the future as well as the linking operations are supposed to be made in the interest of transforming versions of dependencies.

    Breaking Changes

    There are a few breaking changes in angular 10 that affect the whole ecosystem.

    • Logic is updated for matching the time within a day period extending past midnight. This might affect the applications that are using either formatDate() or DatePipe or the b and B format codes.
    • Any resolver returning to empty will cancel navigation. To turn this on, developers have to update the resolvers to update vale like default!Empty.
    • In angular 10 , the NPM does not contain positive jsdoc remarks for assisting the advanced optimization of a closure compiler. Closure Compiler will use higher off absorbing Angular applications built which are sourcing directly rather than ingesting variations posted on NPM. The workaround for this is that users can't forget how to use the present-day build pipeline having a Closure flag --compilation_level=SIMPLE.

    Conclusion

    In the study of Angular 9 vs 10, we see their differences in upgradation and deprecation. However, if studied as a complete framework, it is as powerful as any other javascript-based framework in the world. The angular team works on launching two versions per year. However, with the rising popularity, we are hoping to see Angular version 11 around the fall.  

    Angular 9 Angular 10
    Typescript 3.7 Typescript 3.9
    Welcome Default Ivy Converting pre-Ivy code
    Service Worker Updates Compiler Update
    i18n Improvements Language Service
    Enhancement of Language Service TSLib 2.9
    Dependency Injection Changes in Core TSLint v6
    ModuleWithProviders Support Localization
    API Extractor Updates New Default Browser Configuration
    Component Harness  Deprecation of ESM5 or FESM5
    More reliable ng-update Optional Stricter Settings

    Read More: Need help for upgrading of production app to latest Angular version?

    24

    Related articles

    This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.