Upgrade to Angular 7 in 2-minutes!

Top Angular 7 Features

Angular 7 has many great changes, we’ll highlight the most important ones…

New Compiler

The new compiler provides an accelerated eight-phase compilation with the reduction of application sizes by approximately two. The new compiler is capable of advanced 8-phase rotating ahead-of-time compilation. Most applications can expect a massive reduction of 95-99% in bundle sizes.

Split of @angular/core

Given how large of a framework Angular has become you likely won’t need all of it’s libraries, modules or dependencies. Thus Angular has split @angular/core into several (over 400) separate modules thereby reducing your applications bundle size.

Application Performance

Most developers were including the reflect-metadata polyfill in production builds. This has been removed by default.

CLI Prompts

In version 7 the cli will now prompt the user for configurable options when using ng new or ng add.

Virtual Scrolling

The virtual scrolling package provides helpers for directives that react to scroll events. Virtual Scrolling enables the loading and unloading of elements from the DOM based on what is visible or not.

Drag & Drop

The @angular/cdk/drag-drop module provides you with a way 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, custom drag handles, previews, and placeholders, in addition helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).

TypeScript 3.1

With Angular 7 the TypeScript dependency version has changed from 2.7 to 3.1.

Removal of ngModel

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

Example:

<form [formGroup]="form">
  <input formControlName="first" [(ngModel)]="value">
</form>

Upgrading to Angular 7

You can use the @angular/cli to upgrade for you automatically:

$ ng update @angular/core @angular/cli

Additionally, if you’re using @angular/material:

$ ng update @angular/material

Upgrading all packages

You can quickly & easily upgrade all of your packages using the npm-check-updates package:

$ npm install -g npm-check-updates
$ ncu --upgrade
$ npm install