What’s new in AngularJS 5: easier progressive web apps
Despite the “5” designation, the AngularJS upgrade is just the fourth release for the framework, which was initially called AngularJS and debuted in 2012. Angular 5’s release took longer than expected, missing previous release targets of September 18 and October 23, 2017.
Key features include:
- An emphasis on making it easier to build progressive web apps, so apps can be cached in the browser. The progressive web apps concept, the product of a joint effort between Google and Mozilla, is about enabling development of browser-based apps that offer a superior, native-like experience. Google is still building support for capability in the command-line interface (CLI).
- A build optimizer that makes the application smaller by eliminating unnecessary code. (The build optimizer is a command-line tool.)
- Making Material Design components compatible with server-side rendering. Google needs to fix a few bugs before releasing this functionality.
- Angular Universal State Transfer API and DOM support, for sharing code between server- and client-side versions of an application.
- The compiler has been improved to support incremental compilation. The compiler operates as a TypeScript transform, for faster rebuilds.
- Pipes for internationalized number, date, and currency. This increases standardization across browsers and eliminates the need for i18n polyfills.
- To remove more polyfills, the ReflectiveInjector has been replaced with the StaticInjector. As a result, application size is reduced for most developers.
- Multiple names are supported for components and directives, which is useful in helping users migrate without breaking changes.
- Angular 5 has an updated Httpclient.
- CLI 1.5, which generates Angular 5 projects by default.
- For Angular forms, developers can run validation and value updates on
submitrather than on every input event.
- The RxJS reactive programming library has been updated to version 5.5.2 or later, featuring operators that eliminate the side effects of code-splitting and tree-shaking problems. Also, RxJS now distributes a version using ECMAScript modules, pulled in by default by the Angular CLI.
- Router hooks have been added for tracking router cycles from the beginning of running guards until completion of activation.
Angular 5 does have an issue with production build source maps, with some maps resulting in undefined sources for errors. Also, many previously deprecated APIs, such as Opaque Token, have been removed.
Angular 5 will make progressive web apps easier
To date, supporting progressive web apps in Angular has required a lot of expertise on the developers’ part; Angular 5 is intended to make progressive web app support easier. “We’re trying to find the right set of defaults so that it just would be the default option for most developers, for both desktop and mobile web,” said Brad Green, a Google engineering director.
How to update to Angular 5
Google is providing guidance on how to move to Angular 5 from previous versions.
Angular 6 is on the horizon
Following Angular 5, Google will offer Angular 6 in March or April 2018, if the current release pace holds. Google has emphasized that Angular 6 would repeat themes of Angular 5: “Easier, smaller, faster is the theme for version 5. We’ll continue that theme for version 6, just making [developers’] lives easier, making it possible to deliver apps better for their users,” Green said.
Dependency injection, HTML template remain core Angular advantages
Angular’s selling points at the outset included dependency injection, particularly useful for assembling data services for applications, along with use of an HTML template to compose components. Over all the subsequent versions, these have remained key features. Developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program.
Google says Angular has succeeded because it offers a “batteries included” approach to development, with developers not burdened with figuring out which internationalization library or animation to to use, or how to do HTTP or forms.
The history of Angular’s versions
Angular 5 follows closely the releases of versions 2 and 4, which arrived in September 2016 and March 2017, respectively, skipping over a version 3 designation. (Because the router for Angular already had reached version 4 by the time Angular 3 was due, Google just went right to calling the upgrade itself Angular 4.)
Angular 2 also offered a much cleaner component model. Interoperation with technologies such as web components was also a focus in Angular 2.
Angular 4, meanwhile, offered view-engine improvements and code-generation reductions. The Angular 4.3 upgrade, was released in July and featured HttpClient, which provided a smaller, easier-to-use library for making HTTP requests.
Angular 4.3 also has an attribute,
@.disabled, for conditionally disabling animations as well as new router life cycle events. Since the 4.0 version, Angular also enhanced animations so parent and child elements can be coordinated across page transitions.
Powered by WPeMatico