What’s new in Angular: Version 6.1 ships, Version 7 beta arrives

Printer-friendly version

Posted in

Development Frameworks

The popular JavaScript framework for desktop and mobile apps produces better code and better supports Google’s Material Design


Version 6.1 of Angular, Google’s popular JavaScript framework for building mobile and desktop applications, is here, with the first production release available. And the first beta of Angular 7 has also arroved.


Angular provides dependency injection, particularly useful for assembling data services for applications, along with use of an HTML template to compose components. In Angular, developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program.


Future version: What’s coming in Angular 7


Angular 7 became available in beta in early August, but developers should not expect too much from it yet.


This first beta, called Beta.0, constitutes less than a week’s worth of work and does not contain any new features. Angular’s builders follow a process in which a fresh beta is delivered each week until the stable release of Version 7, which is due in September or October 2018. Each successive beta contains few changes.


Over time, new capabilities will be added. One addition already slated is support for TypeScript 3.0. Developers of Angular expect to have a pretty good idea of the Angular 7 feature set when the framework reaches release candidate stage in fall 2018.


The followup Angular 8 release is scheduled for arrival in March or April 2019.


Where to download the Angular 7.0 beta


You can download the Angular 7 beta source code from its GitHub repo.


[JavaScript is the most widely deployed language in the world. Whether you're a beginning, intermediate, or advanced JavaScript developer, you'll master new skills with this nine-part course from PluralSight.]


New version: What’s new in Angular 6.1


Google’s Angular 6.1 arrived in late July 2018. Version 6.1 is slated to be the last minor release in the Angular 6.x line. 


Its router scroll position restoration lets developers configure the router to remember and restore scroll position while the user navigates an application. New events reset the scroll position; pressing the Back button restores the prior position. To turn this capability on, use this setting RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}). This capability is expected to become the default setting in a future release.


Angular Version 6.1 also adds ShadowDOM Version 1 view encapsulation, by which CSS is connected to components. The component decorator has better cross-browser support and is necessary for content project with Angular Elements. ShadowDOM improves on CSS and DOM, letting developers bundle CSS with markup, hide implementation details, and build self-contained components in vanilla JavaScript.


Angular 6.1’s scroll position management automatically resets or remembers a scroll when navigating around an application. This capability comes into play when using the Angular router. Developers have been building their own scroll positioning for Angular, but now they get this function out of the box.


Other capabilities in Angular 6.1 include:

  • The ability to pipe an object through the keyvalue pipe, which provides an array suitable for use within an *ngFor.
  • Schematics chaining has been improved through support for returning a rule from an existing rule. Developers can more dynamically determine rules to follow when designing schematics.
  • TypeScript 2.9 is now supported, in addition to Versions 2.8 and 2.7.

Where to download Angular 6.1


You can download the Angular 6.1 source code from GitHub. Be sure to use the Angular 6.1.1 release, which fixes a bug that had displayed warnings when working with TypeScript 2.9.


Previous version: New features in Angular 6.0


Version 6 continues an emphasis on being smaller, faster and easier to use. The new features include:


  • Version 4 of the Webpack module bundler for JavaScript, generating smaller modules through a technique known as scope hosting.
  • A new method of connecting modules and services, in which services can be “tree-shakable,” meaning they can be left out of an application if not used.
  • Support for the RxJS 6 library for JavaScript, reducing bundle sizes for common use cases.
  • The Angular command-line interface, bringing commands such as ng update, for updating dependencies and code. Another command in the CLI, ng add, helps developers more quickly add application features, such as starting out with a Material Design application rather than with a blank application. Material Design is Google’s language for designing applications. The ng add command also supports turning applications into progressive web apps, which support offline webpages.
  • CLI support for libraries, with developers able to choose ng-packgr for transpiling libraries to an Angular format or use the Bazel tool to build libraries. Previously, developers had to build and package libraries by hand if they wanted to share components and services with other teams.
  • Capabilities are included from the Angular Elements project, which packages components as reusable Custom Elements in an Angular application. A future release of Angular will make it possible to package Custom Elements for use in third-party applications, including those not using Angular.
  • The Tree component in Angular Material and the Component Dev Kit to help visual tree structures such as a list of files.
  • An optional, backward-compatible generic type to support typed nativeElement.

Along with the Angular 6 release, framework packages are being moved to Version 6 as well, including @angular/core, @angular/common, @angular/compiler, the Angular CLI, and Angular Material + CDK (Component Dev Kit).


Features still on the drawing board


But the planned Ivy renderer has been pulled from Angular 6 due to implementation difficulties. It’s unknown if it will arrive in fall 2018’s Angular 7 instead. Ivy inverts how a rendering pipeline works today: Currently, when Angular turns a template into JavaScript to run in the browser, the renderer runs in the browser with capabilities such as dependency. With Ivy, the developer’s code pulls in these capabilities. This lets developers leave out of the application-bundle capabilities that the application does not need.


Also on the drawing board for Angular is Angular for Designers, which is intended to improve the relationship between designers and developers and let designers be more effective with the framework. This initiative features multiple aspects, including a cloud productivity tool allowing for drag and drop of components, which can be loaded directly from NPM. Angular for Designers capabilities will be released over time.


Where to download Angular 6


You can download the Angular 6 release candidate from GitHub or via the terminal command npm install -g @angular/cli@next, then create a project with ng new, or use the command ng update –next to update a project.


Previous version: What’s new in Angular 5


Despite the “5” designation, the AngularJS upgrade was 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.


Angular 5 features


Key Angular 5 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 blur and submit rather 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.


How to update to Angular 5


Google is providing guidance on how to move to Angular 5 from previous versions.


The history of Angular’s versions


Released in November 2017, Angular 5 followed 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.)


Although the original AngularJS JavaScript development framework already was a hit with developers, Google undertook a rewrite for the second generation, focused on better performance. “We couldn’t get more performance out of the old architecture,” Green said. Angular 2 was rewritten in TypeScript, Microsoft’s typed superset of JavaScript. “TypeScript let us do static analysis of source code. This is something we can’t do in JavaScript, so it becomes much more predictable,” Green said. TypeScript also lets Angular show developers errors in HTML templates.


Another feature added in Angular 2 was a compiler that sits in between written code and output shipped to a production application. This compiler optimizes the generation of template-rendering; code then can run at maximum speed in JavaScript virtual machines.


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.


Source: https://www.infoworld.com/article/3213244/javascript/whats-new-in-angula...


Paul Krill is an editor at large at InfoWorld, whose coverage focuses on application development.




TopLine Strategies was not involved in the creation of this content.