Categories: AngularJS

Angular 7 is out (and what you missed in Angular 6)

Angular 7 has been out since October but some of us haven’t upgraded quite yet from Angular 6 (which brought a lot of nice things of its own, covered further down).

Let’s see what the latest version of the framework has in store for us!

Angular 7 Updates

reflect-metadata Automatically Removed for Production Builds

Angular 7 will automatically remove the polyfill reflect-metadata when compiling an Angular web app for production. It is apparently only needed for development/JIT mode.

The Angular team is saving us a bit of work by having the compilation step take care of this.

Budget Your JavaScript Compiled Bundle File

What’s cooler is that Angular 7 can display a warning when the JavaScript compiled bundle goes above a certain megabyte limit. It can display an error as well at a higher megabyte limit.

New projects will have a warning limit set to 2MB and an error limit set at 5MB.

Now you can watch the weight of your JavaScript bundles and ensure they are within limits. Users will appreciate the small and fast bundle download. Faster downloads means users can get to using your app sooner.

Virtual Scrolling for Fast List Scrolling

One thing that excited me about the swimlane/ngx-datatable library was that it included virtual scrolling. It enables scrolling of a list without creating every single element in the DOM. Only the elements that are visible to the user are displayed.

React and React Native also have virtual scrolling built-in. It’s great to see Angular 7 including this by default.

Angular 6 Updates

And if you missed it, Angular 6 added a few new things too.

Upgrade Packages with ng update

You can now use the following command in the Angular CLI to upgrade Angular modules properly:

ng update

By properly I mean that it will upgrade things like RxJS and TypeScript and other framework dependencies to the latest versions based on the version of Angular that you are running. Makes it a bit easier to manage dependencies, and 3rd-party libraries and modules can hook into this too using something called schematics.

Add New Packages with ng add

Even cooler for me is that the framework is being proactive not only about updating and upgrading packages, but about adding them.

You can install a package using the following command:

ng add

And an installation script will be executed! That means, for example, when you run the following:

ng add @angular/pwa

Then the Angular CLI will also create an app manifest file and a service worker file so that your PWA (Progressive Web App) is ready to go.

Angular Material Updates

Angular 6 had a lot of updates for the Material design package. They added “starter” components like the side navigation and dashboard. The side navigation contains a toolbar component and a list of menu items. The dashboard component displays a grid of card components for displaying various stats, as you are likely to do on an admin dashboard.

Funny enough, since I mentioned swimlane/ngx-datatable, version 6 actually includes a data table component as part of the update to Material. It can show a table of data pulled in from a data source and comes with sorting and pagination.

Angular

Click here to read more about Angular 6 updates.

Rudolf Olah is a software development expert with over 8 years of professional software developer experience. He has produced the video courses "Reactive Programming in Python with RxPy, PyQt5 and Tornado" and "Learning AngularJS Testing" for PacktPublishing. Rudolf offers web development training courses for individual developers and for web development teams. He writes about tech leadership, career coaching and project management.