What’s new in ANGULAR 6?

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

As part of this release, a new version has updated core framework packages (@angular/core, @angular/common & @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 building process much easier.

1. ng update
ng update  is the new CLI command that will analyze your package.json and gives you a recommendation regarding updation of the packages for your application.

ng update will help you adopt the right version of dependencies, and keep our dependencies in sync. If one of our dependencies provides 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 to download new dependencies/package 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 dynamic grid list of cards.

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

c.) Material Data Table
It will generate 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, 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 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!