Angular 6 finally arrives! This is a major production release of Angular, the popular JavaScript framework for building web and mobile applications. This release mainly focuses on the toolchain and on making it easier for developers to migrate to future versions of Angular quickly.
With this release, major framework packages (@angular/core, @angular/common, @angular/compiler, etc), the Angular CLI, and Angular Material + CDK are also synchronizing their releases. All are releasing as 6.0.0 today. Here’s a quick rundown of all major features:
New CLI commands
Two new CLI commands have been added.
The ng-update command recommends updates to an application by analyzing the package.json. ng-update will help developers adopt the right version of dependencies while keeping them in sync.
The ng-add CLI command adds new capabilities to a project by using the package manager to download new dependencies and invoke an installation script.
- ng add @angular/pwa —Converts your app into a PWA by adding an app manifest and service worker
- ng add @ng-bootstrap/schematics — Adds ng-bootstrap to your application
- ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate
CLI Workspaces
CLI v6, which is a part of Angular 6 release, now supports workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration.
It also adds support for creating and building libraries with the command ng generate library <name>. This command will create a library project within the CLI workspace, and configure it for testing and building.
Angular Elements
Angular 6 also comes with the first release of Angular Elements. Angular elements allow bootstrapping Angular components within an existing Angular application by registering them as Custom Elements. They replace the need to manually bootstrap Angular components found in static html content.
Angular Material + CDK Components
Angular 6 features a new tree component for displaying hierarchical data. The Tree component in Angular Material and the Component Dev Kit helps in better visualization of tree structures such as a list of files. Alongside the tree, there are new badge and bottom-sheet components. Badges help display small bits of helpful information, such as unread item counts. Bottom-sheets are a special type of mobile-centric dialogs, commonly used to present a list of options following an action.
With the release of v6, the @angular/cdk/overlay package includes new positioning logic that helps make pop-ups which remain on-screen in all situations.
The angular material also includes 3 new starter components.
- Material Sidenav: Generates a starter component including a toolbar with the app name and the side navigation.
- Material Dashboard: Generates a starter dashboard component containing a dynamic grid list of cards.
- Material Data Table: Generates a starter data table component that is pre-configured with a datasource for sorting and pagination.
Updated to use RxJS v6
Angular has been updated to use RxJS v6. RxJS v6 was introduced at ng-conf and brings several major changes, along with a backwards compatibility package rxjs-compat for keeping applications working without breaking components.
Long Term Support Expansion
The angular community has extended the long-term support to all major releases starting with v4. Each major release will be supported for 18 months with around 6 months of active development followed by 12 months of critical bug fixes and security patches. A common complaint among developers about Angular has been about the messy migrations from one version to another. This announcement aims to make updating from one major to the next easier, and give bigger projects more time to plan updates.
How can you upgrade to the new version?
The update will take advantage of the new ng update tool. Here are the steps for updating.
- Update @angular/cli
- Update your Angular framework packages
- Update other dependencies
Checkout the Angular blog for detailed release notes and steps on how to update.
Read Next
ng-conf 2018 highlights, the popular angular conference
Why switch to Angular for web development – Interview with Minko Gechev
8 built-in Angular Pipes in Angular 4 that you should know
