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.

ng update

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

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:

Angular 2-5

npm install –save @angular/material

Angular 6

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.

Angular Elements

One common desire among Angular developers—especially in enterprise environments—has been to be able to develop Angular components that are project-agnostic. In Angular 6, you can now do just that. With Angular Elements, developers can now take the components that they have developed and embed them as custom elements that can be used with other Angular projects, frameworks, or even with plain JavaScript.

For a great walkthrough on how to bundle an Angular component as a custom element utilizing Angular Elements, go here.

Everything else

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.

Coming Soon…

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!



Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *