As of early May, Angular 6 is here!
The Angular team over at Google has really done a good job listening to feedback from the developer community over how they want to improve the framework from the ground up and with Angular 6 they continued in that same direction.
There are several updates in the Angular 6 release. All of them focus around improving the compatibility and robustness of the framework in any project, as well as minor additions to the Angular CLI to improve ease of use.
Angular CLI Growth
There are two new additions to the native ng commands, ng update and ng add, and additional features added to the ng generate command.
This command will analyze and automatically update all of your @angular dependencies in your package.json. This goes for Angular framework updates as well as third party dependencies as well.
ng add is Angular’s native implementation of npm install. It is an easy way to add new functionality and capabilities to your Angular application. In doing this, Angular 6 is slowly eliminating dependencies and becoming more of a stand-alone framework.
Example: If you want to install Angular Material into your application, here is what it would look like:
npm install –save @angular/material
ng add @angular/material
ng generate <starter-components>
Speaking of Angular Material, Angular 6 continues the theme of implementing Material as the de facto UI Library going forward. With each new release, Angular and Material continue to move in congruence and now have pre-built schematics that can be rendered using the CLI. Material’s Side Nav, Dashboard, and Data Table are three starter components that can be created using a single command. Here’s an example generation of a table component:
ng generate @angular/material:material-table –name=my-table-component
For more information on the specifics of Angular Material’s new schematics, go here
ng generate library
This addition to the ng generate command allows developers to create a library in an existing workspace. Within your Angular project, the newly created library contains a component and a service within an NgModule and is pre-configured for testing and building. Learn more here.
For a great walkthrough on how to bundle an Angular component as a custom element utilizing Angular Elements, go here.
Several other minor changes have been introduced to round out the improvements for developers. The old angular-cli.json file is now named angular.json, web animations are built in to minimize bundle size, and long term support is expanding to all major releases starting with Angular 4.
Although not part of the 6.0 release, the Angular team has teased a new initiative called Ivy. It’s the next generation rendering pipeline and is currently under active development. Stay tuned for that!