Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What’s New in Angular 6?

DZone's Guide to

What’s New in Angular 6?

Angular 6 is finally here! Read on to get a look at the newest features that have been included in this popular framework.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Angular has just released its v6. This major release focuses mainly on the toolchain and making it easier for the user to create an application.

angular

As part of this release, a new version has updated the core framework packages (@angular/core, @angular/common, and @angular/compiler, etc.), the Angular CLI, and Angular Material + CDK. You can see the changelog here framework, material+cdk, cli.

In this blog, I am going to explain some major changes that make the building process much easier.

1. ng update
ng updateis the new CLI command that will analyze your package.json and gives you a recommendation regarding the updating of the packages for your application. ng update will help you adopt for the right version of dependencies, and keep our dependencies in sync. If one of our dependencies provides an ng updateschematic, they will automatically make changes to the code to keep our code updated.

2. ng add
This is an another new CLI command. ng add will help you to download new dependencies/packages and run an installation script which can update our project with configuration changes. It has added new capabilities to your application.

3. CLI + Material Starter Templates
The next addition is angular material starter templates with angular CLI. Now once you run ng g @angular/material to add material to your existing application you will also be able to generate three new starter templates like :

a.) Material Sidenav
It will generate a starter component with sidebar navigation.

ng generate @angular/material:material-nav --name=my-nav

b.) Material Dashboard
It will generate a starter component containing a dynamic grid list of cards.

ng generate @angular/material:material-dashboard --name=my-dashboard

c.) Material Data Table
It will generate a data table component that is pre-configured for sorting and pagination.

ng generate @angular/material:material-table --name=my-table

4. Registering Providers

That’s a very cool feature!

Earlier, if we had a service, in order to make use of it, we were supposed to register it with the injector in a particular module, we used to import it and add it to the provider’s array but now we can do it in the service itself. A way to do that is to use the providedIn property in the injectable decorator. ProvidedIn tells us about the root module which is responsible for creating an instance of the services. By this way, services will be available to an entire application.

BEFORE

// App.module.ts
@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}
//myservice.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() { }
}

AFTER

//myservice.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}

5. RxJS V6
Angular has been updated to use v6 of RxJS. RxJS is an independent open source project that released v6 several weeks ago. RxJS v6 comes with several major changes along with a backward compatibility package rxjs-compat that will keep your application working.

6. Angular CLI
CLI v6 now has support for workspaces containing multiple projects or libraries. CLI projects will have angular.json instead of .angular-cli.json for configuration. Each CLI workspace has projects, each project has targets, and each target can have configurations.

Angular has increased the speed and decreased the boilerplate code. There are many other cool features Angular has provided. You can check it here.

Thanks for reading. Happy blogging!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
angular 6 ,typescript 1.6 ,web dev ,web development frameworks ,angular

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}