Angular 7 – Updates

Angular 7 is released with new interesting changes, and good news related to performance, lets see some updates:

Updating

To begin with, is really easy to update for angular 7 (since we are using angular 6) using the following command:

ng update @angular/cli @angular/core

Depending on how much your dependencies are old, you can try updating ALL your dependencies:

ng update --all --next --force

CLI Changes

In the previous version 6, CLI comes with great improvement, but we commonly had some problems like, “Hmmmm, I’ve created a new project but I forgot to add tag SCSS” or “Oh boy, I’ve created the project but I forgot to add the Routing module“.

Now, the CLI prompts if you want to add routing, or to select a different stylesheet framework. And the best new is, all of this is customizable through the schematic.json. Using the Schematic CLI you define which prompts to execute. Example:

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
}

Performance

Many improvements were made according to Angular Team, but one they brought to our attention is related to the reflect-metadata. This allow us to use runtime reflection on Typescript, saving us time to recompile the project on every change, so you can conclude this is better for development right? Exactly, but many of us developers forget to remove this in production.

Well, now our mistake is protected, the v7 will automatically remove this from our polyfill.ts file, and include this in the build step when the app is being built in JIT mode.

Also, new projects are coming with Bundle Budgets by default. This will warn us when the initial bundle is increasing more then you specific (2mb default) and will error at some specif size too (5mb default).

This can be changed in angular.json (See this example). Bunch of other improvements were made to reduce the application size.

Dependencies

Angular v7 updated their main dependencies too, now using Typescript 3.1, RxJS 6.3 and Node 10 (still supports v8).

Angular Material

Many updates was made in this version, and new components were introduced like virtual scrolling module (for large list), drag n’ drop module (supporting reordering list and transfer) and some component styles updates following the new Material design specification.

References

Tulio Castro

Author: Tulio Castro

Fexco Senior Software Engineer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.