Angular is one of the best-known and most used frameworks for front-end developers. With the release of Angular 7, we have seen several improvements that have mainly affected the Framework ‘s Core, AngularMaterials, as well as the CLI. In this article we will illustrate all of these enhancements and we will present a guide on upgrading projects that were created with earlier versions.
I. New features of Angular 7
The Angular team has invested a lot of effort inimproving the CLI. In older versions, when you run commands such as ng new or ng add, you can’t make any customizations (for example, ignore the installation of some modules.) With the new CLI, you have more flexibility with all these commands. The example below shows the execution of ng new which offers the possibility to install or not the routing module. The CLI also allows to choose between CSS, SCSS, SASS… And the good news is that everything is customizable! Just add a schematic.json file in which you specify the steps to perform.
These new features also affect the Angular CDK (Component Development Kit) with the integration of two new modules:
1. Virtual Scroll
In recent years, most web and mobile applications have focused on the dynamic loading of content such as news feeds, images… Angular has facilitated these tasks for developers by integrating the virtual scroll features that manages the loading and unloading lists and elements in afluid way, without affecting performance.
Link to the official documentation: https://material.angular.io/cdk/scrolling/overview
2. Drag and drop
The @angular\ cdk \ drag-drop module provides an easy way to implement drag and drop remove functionality word. It allows to perform this functionality as well as the sorting of lists… The developer has the possibility to customize all these features especially on the animations level.
Link to the official module documentation: https://material.angular.io/cdk/drag-drop/overview
New enhancements include updating dependencies. Indeed, Angular 7 depends on version 3.1 of Typescript instead of 2.7. In addition the latest version of RxJs 6.3.3 has been added which offers performance gain, ease of debugging and improved modularity, while ensuring compatibility with earlier versions. Finally the new version depends on Node JS10.
Angular’s team also noticed that developers tend to forget reflect-metadata polyfill in production environments when it is needed only in the development phase. In order to solve such a problem, it will be automatically removed from your polyfill.ts for production builds.
New projects created with the new version will notify the developer if the size of a bundle exceeds 2MB and generate an error if it exceeds 5MB. These limits are adjustable in the angular.json file.rior
II. Upgrade of old versions
1. Upgrading your application
For most applications that are developed using an older version of Angular, upgrading your application requires the Following commands:
$ ng update @angular/cli @angular/core
And, if you use Angular Material, just run the Following command:
$ ng update @angular/material
2. Upgrading your CLI
Finally we will demonstrate the upgrade of your CLI to version 7. First you have to uninstall the old version with the command
$ npm uninstall -g angular-cli
The second step is to clear the mask as follows:
$ npm cache clean
The last step is based on the installation of the latest version
$ npm install -g @angular/cli@latest
It’s generally recommended to consult the upgrade guide. Before performing any operation especially at the critical projects level: https://update.angular.io/
