Comparison Between Angular 9 vs Angular 10
In this article, we are comparing the 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 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. for e. g
- 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.
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.
Angular 10 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.
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.
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.
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.
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.
angular 10 supports merging of multiple translation documents by means of a message IDwhich was earlier done for one file in angular 9.
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.
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.
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.
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.
|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|
|API Extractor Updates||New Default Browser Configuration|
|Component Harness||Deprecation of ESM5 or FESM5|
|More reliable ng-update||Optional Stricter Settings|