Share this article Return

Facebook Twitter Linkedin Pinterest



Due to the growing popularity of mobile apps & web applications, companies are looking for a better option to build mobile & web apps with faster speed & fewer resources. To achieve that there are few frameworks globally available like Angular, React, Meteor. To stay abreast with the growing need of the customers and businesses, the constant inflow of the niche technology, frameworks, and platforms need to update. In this blog, we are sharing the differences between the features, changes, and improvements related to Angular 6 vs Angular 7 vs Angular 8 vs Angular 9.



Angular is a JavaScript framework written in TypeScript developed by Google and is known as a “Superheroic JavaScript MVW Framework” . Angular (version 2 +), originally released in September 2016, is a complete rewrite of AngularJS. The latest major release is version 8 at the time of writing. Google AdWords, one of the most important projects at Google, developed on Angular - so Angular is likely to be around for a while.

Major differences and improvements between Angular 6 vs Angular 7 vs Angular 8 vs Angular 9

Angular 6 Features



Angular 6 was released on May 4th, 2018. The major highlights of Angular 6 include the Angular Command Line Interface (CLI), The Component Development KIT (CDK), Angular Material Package update and with new TypeScript version 2.7, it is much easier to code with conditional type declarations, default declarations, and strict class initialization.

Angular Element

To create a widget or component that can be included in any existing web page was made possible with Angular Elements.

The Angular Elements package provided the ability to create an Angular component and then publish that component as a web component which can be used in any HTML page

Service worker

Service workers were first introduced in Angular 5. It is the scripts which run in the web browser and manage to cache an application. Service workers come with some bug fixes, including some new functionalities as there was no straight way for deactivating the service worker and to overcome this, Angular 6 came up with a new script file safety-worker.js in production bundle. This script file helps them to unregister an existing service worker.

Internationalization (i18n)

One of the major changes introduced to Angular 6 is internationalization (i18n) feature with runtime rendering so that there is no requirement to build one application per locale.

Bazel Compiler

Bazel optimizes your Angular compilation, it only rebuilds what is necessary to build as it does not make any sense to rebuild the entire application for every little change with this so we can archive fast and incremental builds.

ng-add

ng add helps you install and download new packages in your angular apps.

ng-update

ng update is used to update and upgrade your packages it will help you to upgrade from Angular 5 to Angular 6, or any other package in your Angular app.

Tree Shaking

Tree shaking is a build optimization step which tries to ensure any unused code does not get used in our final bundle which helps you to make your app smaller. It uses new injectable services where we can register a provider directly inside the @Injectable() decorator, using the new providedIn attribute.

Know more about Top 10 Features of Angular 6.0

Some Major updates in Angular 6



Typescript 2.7.x supports

Improved decorator error messages

Fix platform-detection example for Universal

Added to supports of Native-Element

Added Optional generic type for ElementRef

Updates on NgModelChange

Add type and hooks to directive def

Enable size tracking of a minimal CLI render3 application

Add canonical view query

<ng-template> now becomes <template>

Long-term support(LTE) added to Angular from v4

Angular 7 Features



Google has released Angular version 7 in Oct 2018 with a lot of optimum features and significant changes like Angular Material, CLI prompts, Scrolling, Drag, and Virtual and Drop & Component Dev Kit (CDK)

CLI prompts

In Angular 7, the command-line interface (CLI) prompts have been updated to v7.0.2, When the user executes common commands like ng add @angular/material or ng new it will automatically prompt users commands like ng add @angular/material help you discover built-in features like routing or SCSS support.

New ng-compiler

Angular 7 added a new compiler called the Angular Compatibility Compiler (ngcc). Just like the name suggests, the angular compiler offers an 8-phase rotating ahead-of-time compilation(AOT) and most of the angular applications noticed a massive reduction (95-99%) in bundle sizes.

Angular Material CDK (Component Dev Kit)

Virtual scrolling

The scrolling package enables loads and unloads items from the DOM depending upon visible parts of lists, resulting into a much faster experience for users having huge scrollable lists.

Drag & drop

Now you can re-order the list just by dragging and dropping with new @angular/cdk/drag-drop module which provides free dragging, sorting within a list, transferring items between lists, animations and much more.

Application performance

Many developers include the reflect-metadata polyfill in the production, so they decided to fix this part by automatically removing it from your polyfills.ts file and to speed up the performance new applications will warn when the initial bundle is more than 2MB and will error at 5MB which user can modify it in angular.json file.



Angular Do-Bootstrap

Angular 7 added a new life-cycle hook (ngDoBootstrap) and interface (DoBootstrap), It's used for bootstrapping modules that need to bootstrap a component.

Router

In Angular 7, If you try to trigger navigation outside of the Angular zone it logs a warning (only in development mode). Also, adds navigation execution context info to activation hooks.

Some Major updates in Angular 7

Angular 7 now supporting to TypeScript 3.1

Added a new ability to recover from malformed URLs

Downloadable console for starting and running Angular projects on your local machine

compiler-cli: update tsickle to 0.29.x

Export defaultKeyValueDiffers to private API

Angular 8 Features



Angular 8 has introduced with a bunch of workflow and performance improvements and a lot has changed in the framework under the hood in terms of tooling. Comparing Angular 6 vs Angular 7 vs Angular 8 Finally, Angular 8 released with ivy rendering which Angular team was along with updated angular core framework, Angular Material, and the Command Line Interface or CLI.

Ivy Engine

Ivy is a major part of this release, and it took most of the effort from Angular 6 to release it. Ivy is a new rendering engine that will produce smaller bundle sizes But it's not recommended to start using it in production not just yet. Know more about what is ivy?

Web Workers

Web workers are essential for improving the parallelizability and the speed of your application. Angular 8.0 added support to CLI which provides one bundle for every web worker & they do it by writing code off the main thread.

Lazy Loading

Lazy loading is based on the concepts of Angular Routing and Angular 8 added support for dynamic EcmaScript imports in router configuration as it helps bring down the size of large files by lazily loading the files that are required.

Angular Firebase

Angular 8 officially added support for firebase and now deploying an Angular app to Firebase is very easy, and it doesn’t take too much time using Angular CLI, Service Worker.

Differential loading

Your Angular 8 apps now will more performant thanks to differential loading and two bundles are created for a production build i,e bundle for new browser with ES2015+ and with an old browser with ES5 version. The correct bundle will automatically load by the browser with new ES6 modules present in the new browser.

The ng build command with the --prod flag will take care of bundling everything out of the box.

Opt-In Usage Sharing

With Angular 8, we can switch between IVY and the regular View engine build. It enables opt-in to sharing telemetry about your Angular CLI usage with the Angular and can collect data like commands used and the build speed if users allow them which will help developers improve in the future.

Angular CLI Builders

The CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands.

Major features included in Angular 8

AngularJS API Migration Improvements with $location service

Updated Typescript to 3.4.x

@angular/platform-webworker and@angular/platform-webworker-dynamic both the packages are deprecated

@angular/http removed from the list of packages

ng-build, ng-test, and ng-run are equipped to be extended by 3rd-party libraries and tool.

Angular router backward compatibility

Dart-sass for Sass files

The ViewChild and ContentChild decorators now must have a new option called static .

Angular 9 Features





Angular 9 was released on the 7th of Feb 2020, with some exciting new features. Along with these existing features have also been modified. The highlight of this version is the default IVY compiler which forms the core structure of the entire framework.

IVY as a Default Compiler

The default IVY compiler reduces the bundle size by 25-40 percent which enables better performance. This enables the developers to decrease the size of files making it user-friendly. IVY checks the bindings within the templates of any application and then reports any kind of issues it finds. this helps in detecting any of bugs earlier in the development process. It then compiles the codebases with tools and techniques to debug its applications. In angular 9, the IVY manages the style binding without being dependent on any timings. Angular 9 maintains most of the drawbacks without losing performance.

More reliable ng-update

The ng update is the basic update to the current CLI framework takes advantage of newer updates automatically. This will also enable to give updates and information about any kind of migration.

Angular depends on various services and libraries that are difficult to track. API landscape of these libraries helps find the missing updates so that they are communicated easily.

New options for 'providedIn'

This angular 9 feature provides us with certain options while creating services in Angular. for e. g

platform — The providedIn: 'platform' makes the service available in a special single platform that is shared by all applications on the page.

— The makes the service available in a special single platform that is shared by all applications on the page. any — It provides a unique instance in every module, instilling the token.

IDE and Language Service Improvements

The Angular language service extension includes a set of useful extensions in order to build up the development experience with Angular. The extensions include Angular snippets, ESLint, and debugging extensions. Along with these performance and stability issues have also been fixed.

Updated to Typescript 3.7

The typescript 3.7 was released in November 2019 and it gave a major hit to the angular 9. The angular 9 is updated to work with the Nullish coalescing and optional chaining feature of the Typescript 3.7. This feature helps to stay in sync with the environment.

Component Harness

Angular 9 provides alternative ways to test components to make sure that the unit tests are correctly audited and less frail. Angular finds the component on its own.the compile rand runtime have been updated in angular 9, so there is no longer a need to identify this in the entryComponents array.

The Phantom Template Variable Menace

In the previous versions, phantom variables were not cited in the template’s related component. Building the phantom variables can usually threaten the applications. With this version, a compiler error shows up, when a template variable is created that has not been characterized in a component.



Major updates in Angular 9

Selector-less directives were already supported in the old version but were missing in the Ivy preview in Angular 8. This has now been added to Angular 9.

The AOT builds will be noticeably faster ensuring a significant change in the compiler's performance.

With IVY we see an improvement in the build error. It gives less time for the builds to complete enabling all the error messages easier to read.

The Angular framework in the new version uses unique techniques and tools to debug its applications by themselves.

The deprecated versioned files option for service workers in the service worker asset group config has been removed.

The ViewEngine in this version translates the templates and components into regular HTML and JavaScript for the browser can interpret and display them.

Conclusion:



In this article, we have discussed the major differences between Angular 6 vs 7 vs 8 vs 9. Being an AngularJS Development Company the main updates received for developers in Angular 6 were ng update, Angular Material + CDK components, CLI Workspaces, Animations Performance Improvements, ng add, and Angular elements wherein Angular 7 they updated component dev kit (CDK), Drag & drop. Virtual scrolling, application performance improvements, documentation & dependency updates and Angular 8 released with a major update in Ivy, web workers, lazy loading, improvement of ng-Upgrade, support for node v10, support for TypeScript 3.1, CLI Prompts & angular performance also Angular 9 features like Default Ivy, Typescript 3.7 support, i18n Improvements and more.

Angular 6 Angular 7 Angular 8 Angular 9 Angular Element CLI Prompts Ivy Engine Default Ivy in v9 Service worker Virtual Scrolling Web Workers Phantom Template Variable Menace Internationalization (i18n) Drag and Drop Lazy Loading Dependency Injection Changes in Core Bazel Compiler Bundle Budget Improvement in ng-upgrade Service Worker Updates ng-add / ng-update Angular Compiler Support for Node 10 i18n Improvements ng-update Angular Do-Bootstrap CLI workflow improvements More reliable ng update ngModelChange Better Error Handling Upgrading Angular Material API Extractor Updates TypeScript 2.7 support TypeScript 3.1 support TypeScript 3.4 support Typescript 3.7 support Improved decorator error messages New ng-compiler Differential Loading Component Harness <ng-template> updated to <template> Native Script Improved Web Worker Bundling ModuleWithProviders Support

Also Check out our Article: What's New in Angular 10? Features of Latest Angular Update

About The Author Amit Khirale My passion lies in empowering other businesses on how to take their complex processes, business & operations online, using modern technologies for web & mobile application development which are custom, scalable and reliable.

Share this article

Facebook Twitter Linkedin Pinterest