Google has delivered Angular 7, a new major version of the web popular framework. This version brings CLI Prompts, Angular Budgets, Virtual Scroll, Drag and Drop, and more.
The Angular CLI, a command-line interface tool used for developers to initialize, develop, scaffold, and maintain Angular applications, will now prompt developers when running common commands like ng new or ng add @angular/material, aiming to help developers discover built-in features like routing or SCSS support. In addition, any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection, once CLI Prompts have been added to Schematics.
"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
Angular Budgets is a feature which allows developers set budget thresholds in angular.json configuration, to ensure that parts of an application stay within the size of the defined boundaries. Budgets has received improvements related to performance in Angular 7, now warning developers when the initial bundle of an application is more than 2MB, and raising an error at 5MB. It is easy to customize these budgets:
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
Another improvement related to performance is that Angular 7 will remove the reflect-metadata from polyfill.ts file in production; this polyfill is only needed in development, and many developers were including it in production.
Virtual Scrolling has been added to CDK, loading and unloading elements from the DOM based on the visible parts of a list, and making it possible to build very fast experiences for users with very large scrollable lists.
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
Another feature added in CDK is the Drag and Drop support. It enables developers to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, etc.
For most developers, a single command should be executed in order to update to Angular 7:
ng update @angular/cli @angular/core
Detailed information and guidance on updating an application to Angular 7 can be found on update.angular.io. According to Google, early adopters have reported that this update is faster than ever, and many apps take less than 10 minutes to update.
The documentation has been updated, now including reference material for the Angular CLI. The entire list of changes is available in the Release Notes.
