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.
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.
Creating 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 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.
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 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 helps you install and download new packages in your angular apps.
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 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.
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)
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.
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.
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 7 added a new life-cycle hook (ngDoBootstrap) and interface (DoBootstrap), It's used for bootstrapping modules that need to bootstrap a component.
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 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 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 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 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.
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
ContentChilddecorators now must have a new option called
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.
API Extractor Updates
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
providedIn: 'platform'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.
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
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.
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|