Angular 4 reduces footprint, adds features

The latest version of the JavaScript framework reduces the size of generated code by more than half and moves to TypeScript 2.1

Angular 4 reduces footprint, adds features
PublicDomainPictures (CC0)

Angular 4.0.0, the latest upgrade to the popular JavaScript framework for mobile and desktop development, was released by Google late yesterday afternoon.

The upgrade features view engine improvements making Angular smaller and faster and helping developers build smaller applications. "We've made changes under to hood to what AOT-generated (ahead of time) code looks like," Stephen Fluin, a Google developer advocate for Angular, said in a bulletin received by InfoWorld close to press time. "These changes should reduce the size of the generated code for your components by more than half in some cases."

According to Google metrics, generated code had been about 10 times the size of the original template. "With this release, generated code is now only 3 times the size of the original template," the bulletin said. Angular's builders had heard from developers that migrating to the new version, which had been available in a release candidate form, had reduced production bundles by hundreds of kilobytes.

Version 4.0.0 follows a release schedule detailed late last year in which the company jumped right from Angular 2, which arrived last September, to Angular 4. The framework was rewritten with TypeScript, Microsoft's typed superset of JavaScript, with the Angular 2 release, and version 4 uses TypeScript 2.1. Moving to the newer version of TypeScript means better type-checking throughout an application as well as better speed for ngc, the compiler for Angular templates.

Also with version 4.0.0, animations have been pulled out of @angular/core and put into their own package. "This means that if you don't use animations, this extra code will not end up in your production bundles," the bulletin said. With this change, developers can more easily find documentation and take better advantage of autocompletion. The template binding syntax in the framework now lets developers use an if/else style syntax and assign local variables such as when unrolling an observable.

Angular Universal, which lets developers run Angular on a server, has been brought up to date with Angular again, Fluin said. "This release now includes the results of the internal and external work from the Universal team over the last few months," he said. "The majority of the Universal code is now located in @angular/platform-server."

In other improvements, when an error is caused by something in a template, source maps will be generated to provide a meaningful context in terms of the original template. Also, flattened versions of Angular modules are now offered. "This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios," according to Google.

Known issues with the upgrade include Google recommending leaving TypeScript's StrictNullChecks setting turned off, as more work needs to be done in this vein. Developers should use NPM to update to version 4.0.0 on Windows, Linux, and Mac systems. Google also is working on an interactive Angular Upgrade Guide, featuring information on making changes to applications.

Angular has been popular with developers, recently rated as the second-most-wanted framework behind Node.js in a recent Stack Overflow survey of developers. Upcoming releases planned for Angular include versions 5.0.0, due in September or October, and 6.0.0, due a year from now. Version 4.1 also is planned.

Copyright © 2017 IDG Communications, Inc.

How to choose a low-code development platform