Difference between Angular 6 vs Angular 7

ANGULAR 6 VS. ANGULAR 7

Among numerous updates of Angular brought in by Google, Angular 7 is the most recent one with Angular 6 coming before it. While Angular 6 got released in May of 2018, Angular 7 was released in October of 2018. Both of these updates came with their own set of new features, improvements and changes.

Features Contained

Stable Angular Material with CDK, Angular CLI Workspaces, ng update, ng add, Angular Elements, Service Worker Safety, Animations Performance Improvements and Bazel Compiler were the main features in Angular 6.

Angular 7 contained CLI Prompts, Angular Material and Component Dev Kit (CDK), Drag and Drop, Virtual Scrolling and Application Performance Improvements as main features.

If you are interested in knowing the differences between the features, changes and improvements related to Angular 6 and Angular 7, we are sharing them with you.

Main Focus
Angular 6 was a major version which added new features and brought a few upgrades. This version of Angular was much faster and lighter than Angular 5 which was its previous version. Its features helped to make dot net development easier.

Angular 7 focused more on upgrading the existing features rather than publishing maximum features which was the case with Angular 6. Though Angular 7 did not feature Ivy, still it introduced some useful new features for improving the performance of developers and easing up the development process for them. For your knowledge, the Ivy project is concerned with rewriting the Angular compiler and runtime code for making it better, smaller and faster.

Prominent Features of Angular 6:

Angular Elements
Angular 6 is the first release which fully supports Angular Elements. Brain child of Rob Wormald, a developer programs engineer at Google, Angular Elements feature enables developers to use Angular components in other environments.

Right from the time of its inception, Angular was the favoured choice of developers to build Single-Page web apps, but they faced difficulty in adding a widget to any existing web page. Angular Elements is a solution for this difficulty as it allows developers to create an Angular component and publish it as a web component. After it gets published as a web component, it can be easily used in any HTML page.

ng update

This new CLI command enables developers to automatically update the Angular dependencies of their CLI applications. It updates all their @angular/* dependencies to the latest stable version that includes all the core packages in their dependencies and devDependencies like zone, rxjs, typescript, etc. and also the CLI itself. This feature helps to save some effort of developers in migration to the next stable version as they need not manually identify and update the versions of peer dependencies.

Service Worker Safety
Service worker is a script which runs in the web browser and manages caching of an application. Sometimes when developers are deploying the latest version of the application, they need to deactivate or uninstall the existing service worker. Before Angular 6, there was no straight way for deactivating the service worker. To fulfil this need of developers, Angular 6 came up with a new script file safety-worker.js which is part of the production bundle. This script file helps them to unregister an existing service worker.

ng add

This new CLI command enables developers to seamlessly add new capabilities to their applications. It does two things, firstly it uses the package manager for downloading new dependencies, then it runs an installation script in that package.

As an example, installing and setting up Angular Material earlier required quite a few steps, but now it can be all done in a simple manner with just one command.

ng add @angular/material
The command now has made it relatively easier for the developers to add things like Service Workers, Progressive Web Apps and Angular Elements to their existing Angular application.

Stable Angular Material with CDK
The initial version of Angular Material2 that was released in March of 2016 lacked in the number of components, stability and compatibility with the latest angular versions. But it was rendered more stable and compatible with Angular 6. Many components in Angular Material2 are built on the top CDK Toolkit which is the Design agnostic toolkit. In Angular 6 release, CDK Toolkit is stable and developers can utilize it for building their own components with less effort as this toolkit already contains the majority of the commonly used utilities for building components.

Angular CLI Workspaces

Angular CLI workspaces allow developers to have more than one project in one workspace. This brings all their projects under the same workspace. This facility is not limited to applications, but also is applicable to angular libraries. This gives developers the freedom to break down large applications into smaller applications and modules. The modules like authentication module can then be shared across the applications that are using those particular modules. This improves the workflow of developers by decreasing code repetition with the use of shared libraries which are generated and managed by Angular CLI.

Bazel Compiler
This feature helps developers in saving time and enables them to concentrate only on the code that is necessary. This compiler rebuilds only those components that are needed to be built. Often the source code changes, and for preventing the rebuilding of the entire code and application, Bazel compiler was used for abstracting and changing the codes that are important. Angular 6 helps to provide compiler support.

Animations Performance Improvements
Before Angular 6, animations were imported from @angular\core. But after Angular 6, animations can be imported from the @animations/animations package. This new implementation of animations does away the need for web animations polyfill that are enabled through the src/polyfills.ts file. This file contains the mandatory and many of the optional polyfills as JavaScript import statements. Now with Angular 6 version, developers can remove this polyfill from their application and save approximately 47 KB of bundle size. Also, they can improve the performance of animations on the Safari platform.

It is now time to share the features of Angular 7 with you.

CLI Prompts

In Angular 7, the CLI or command-line interpreter prompts are updated to v7.0.2 with new features. This feature prompts users when they type common commands like ng-add or ng-new, @angular/material to help them discover built-in features such as routing, SCSS support besides others. These CLI prompts are also added to Schematics for enabling all package publishing schematics to benefit now from CLI prompts.

Angular Material and Component Dev Kit (CDK)
The Angular 7 brought in minor visual updates and improvements in Material Design which earlier received a major update in the year 2018. In addition to them, virtual scrolling, refresh, large lists of data, dynamic loading and unloading of parts of DOM also were part of the improvements brought in the CDK and Angular Material.

Moreover, the applications in Angular 7 can now also be equipped with drag-and-drop functionality through importing ScrollingModule or DragDropModule.

Drag and Drop
The new drag-drop module provides developers a better way to create drag and drop interfaces with ease, that is backed by support for free dragging, sorting within a list, custom drag handles, animations, transferring items between lists, placeholders and previews.

In simple words, the Drag-and-Drop support has been implemented in Component Dev Kit and it also includes automatic rendering during the time users relocate items.

Virtual Scrolling

The scrolling package provides helpers for directives which respond to scroll-related events. Virtual scrolling allows developers to load and unload elements from the DOM based on the parts that are visible. It enables an efficient way for simulating all items being rendered by making the height of the container element exactly same as the height of the total number of elements to be rendered, and then only rendering the items that are in view. This results in extremely fast experiences for users with immensely large scrollable lists.

Application Performance Improvements

The Angular development team at Google has always focused on bringing performance improvements. As they analysed this, they found recently that most of the developers were making use of reflect-metadata in their production that actually was only needed in the development. For fixing this problem effectively, the development team has made a part of Angular 7 for automatically removing this from the polyfills.ts file.

For speeding up the performance, new applications will warn a user when the initial bundle exceeds 2 MB and give an error at 5 MB which the user can modify in the angular.json file. Such budgets align with warnings that can be shown to such users who are taking advantage of the Data Saver feature in Chrome.