What’s New in Angular 6 – The Latest Version of JavaScript Framework
The speculations are over. Google’s new JavaScript Framework Angular 6 has arrived. It was during the launch of its previous version Angular 5 in November 2017, that Google had begun its preparations for the release of the new Angular 6. Therefore, it will be liable to see what major changes have been introduced in this new version.
Angular 6 has given more emphasis on the toolchain instead of the underlying framework, which indeed makes it simpler and faster to use the Angular.
Furthermore, as one moves ahead with the framework packages such as @angular/core, @angular/common, @angular/compiler, etc, the Angular Material including CDK and the Angular CLI, the key versions are getting synchronized.
The changes will help to make clear cross-compatibility. However, the small and patch releases will be made available according to the requirements of the projects.
RxJS v6
With the launch of Angular 6, the developers will have an access to RxJS 6. However, you have to update your application. In fact, the v6 was launched many weeks before and it has been introduced with various important changes including the backward compatibility package rxjs-compat allowing running the applications smoothly.
Moreover, RxJS has also changed the method to import things. Let’s analyze this with an example:
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe(
map(n => n * n)
);
However, in the earlier version, the way to import things was written as
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe(
map(n => n * n)
);
In fact, RxJS 5.5 had unveiled the pipeable operators. Apart from that, you have to go through the complete documents written by the Angular team when you are upgrading to Angular 6.0. It also contains a set of four new tslint rules better known as the rxjs-tslint.
Angular Material + CDK Components
One of the major highlights of the Angular 6 has been the new tree component that is used for showcasing the hierarchical data. The team Angular states that following the patterns from the data-table component, the CDK houses and core tree directives including the Angular Material will provide the similar experience with Material Design styles on top.
Besides, the new badges have been released alongside the bottom-sheet components. The badge is useful in revealing vital information like the unread items while the bottom-sheet components signify the specific mobile-centric dialogs from the bottom of viewpoint representing a list of options followed by action.
No doubt that @angular/cdk/overlay package has been identified as one of the most effective infrastructures in CDK today.
ng update
ng update <package> has been referred to as a new CLI command that allows you to update your project dependencies to the latest versions including the core packages in the dependencies and devDependencies along with CLI. And due to its recursive action, the dependencies including zone.js, rxjs and typescript also get updated automatically.
Other than that it also updates the scripts with the help of schematics. However, please note that if one of the dependencies is offering the ng updateschematic, the codes tend to get updated automatically as when the changes are needed.
A schematic is called a package that mainly contains the tasks for the developers such as developing codes or updating the code. The classic tasks of Angular CLI are available in @schematics/angular package; however, some more new features have been added such as the @schematics/package-update.
As such there are four main tasks offered by schematics including:
- @angular/cli for updating CLI
- @angular-devkit for updating the DevKit
- @angular for updating Angular packages
- all for updating an entirely immediate update
However, in case you want to only update the Angular packages and not the CLI version, then first you need to install the schematic.
yarn add --dev @schematics/package-update
Then add a schematics script in your package.json
"scripts": {
"ng": "ng",
"schematics": "schematics"
// ...
},
Next you have to run the command
yarn schematics @schematics/package-update:@angular
And, this finally updates the Angular packages.
It is expected that the Angular team will add a few more libraries and packages in the ng updateSchematics within the months arriving. Not only that, the enterprise library component team is also said to make use of ng update for making changes to save the time of developers.
ng add
Besides the ng update, you have yet another CLI command known as ng add <package> that helps in adding new possibilities to a project with ease. In order to download new dependencies, it requires the support of a package manager and implementing the schematics or installation scripts to configure changes in the project and add more dependencies such as polyfills or scaffold package-specific initialization code.
As such, you can look out for a few examples of ng new application:
- The ng add @angular/pwa allows the applications to get converted to PWA after adding app manifest and service worker
- The use of ng add @angular/material helps in installation and setting up of Angular Material including the themeing. You also can register a new starter component in ng generate
- The ng add @ng-bootstrap/schematics lets you add the ng-bootstrap into your application
- The ng add @clr/angular@next is used for installing and setting up Clarity from VMWare.
- In ng add @angular/elements, you are required to add the document-register-element.js polyfill and dependencies for Angular Elements
Elements
The Angular team has launched the first Angular Elements with an aim to bootstrap Angular components with the existing Angular application. You are just required to register them as Custom Elements.
It is widely used in angular.io as content management system letting developers to actively bootstrap through embedded HTML and you don’t have to do the bootstrapping of Angular components manually.
Tree-shakeable Providers
So, when a developer is importing or exporting modules in the JavaScript framework, there remain some of the codes that are not utilized. Well, this is known as tree shaking or dead code elimination in terms of JavaScript framework.
The unused modules do not get included in the bundle. And to be precise, the new method has been induced with the intention of improving tree-shaking in the application.
Now, what needs to be done is you have to register directly inside the @Injectable () decorator with the help of new providedIn attribute. The root or any other module of the application is accepted. As root gets used, the injectable gets registered as singleton into the application.
Similarly by using providedIn; UsersModule that is the injectable gets registered as the provider of the UsersModule not added to the provider of the module.
@Injectable({
providedIn: 'root'
})
export class UserService {
}
In fact, it is not only being recommended for the library developers but even for the app developers who can register an injectable. In addition, it also registers an InjectionToken directly with providedIn.
export const baseUrl = new InjectionToken<string>('baseUrl', {
providedIn: 'root',
factory: () => 'http://localhost:8080/'
});
It makes the unit testing easier. The UserService only has to use providedIn: ‘root’:
beforeEach(() => TestBed.configureTestingModule({}));
Angular Material Starter Components
If you have to add material to an existing application, running the command ng add @angular/material is a good option. This would offer you three new starter components. It includes:
- Material Sidenav
- Material Dashboard and
- Material Data Table
In the first case, you get a starter component with a toolbar having the name of the app and side navigation. The responsive component is based on breakpoints.
For example:
If you run the command ng generate @angular/material:material-nav –name=my-nav, you get starter component as material-nav
In the second option, you can create a starter dashboard component comprising of vibrant grid list of cards. For instance, ng generate @angular/material:material-dashboard –name=my-dashboard will generate material-dashboard.
In the third instance, you can build starter data table component, which has pre-configured datasource used in pagination and sorting.
The command ng generate @angular/material:material-table –name=my-table will provide you the starter component material-table.
Changes in Animations
The web animations polyfill will no longer be required as the Angular team has updated the implementation of animations. The only time when you don’t have to eliminate polyfill is when you are making use of AnimationBuilder.
Once the polyfill gets removed from the application, you can save approximately about 47KB of bundle size. This will also better your animation performance in Safari. But if a browser does not support the element.animate API, Angular 6 will retreat to CSS frames.
Library Support
Offering support for development and creation of libraries has been a commendable feature of CLI. Let’s look at this command:
ng generate library <name>
By using this command you can build a library project within the CLI workspace and then go for further configuration and testing.
CLI Workspaces
The version 6 of Angular CLI has provided ample assistance for workspaces that contain several projects including applications and libraries. As for now, you have to switch to angular.json from angular-cli.json for project configuration and creation. The workspace has projects, projects contain targets and targets can contain configurations.
Updates about Ivy
The Angular team has brought the new concept of Ivy at the ng-conf. It is the latest rendering pipeline. At present, it is still going through the development process and therefore, it hasn’t been released with Angular version 6.0. You will come to know of its preview version as soon as it gets ready. So, stay tuned.
Long Term Support (LTS)
Previously, the Angular team had informed the developers that they would be extending their long-term support line only for the v4 and v6, with the aim of simplifying the process of updating one project to another and offer more time to complicated projects to plan better.
However, now it has decided to extend support to all major releases beginning from version 4.
Upgrading to Angular 6.0 – Know the Three Easy Steps
So, if you want to upgrade your JavaScript Framework to the latest version 6.0, then please follow the three easy steps. Obviously, visit the official website and follow the guidelines.
- The first step is updating @angular/cli
- Next, upgrade the other framework packages and
- Lastly, update other dependencies
Conclusion
Now that Angular 6.0 is already on the floor, the web developers, as well as the app developers, should quickly get fully updated about the latest version of JavaScript Framework. The Angular team has tried its best to load it with new features and important improvements.
However, you still have to keep in touch about Ivy as it hasn’t been released. So, maximize its benefits to create extraordinary applications that gain the attention of target audiences.
What’s New in Angular 6 – The Latest Version of JavaScript Framework posted first on https://thetruthspyblog.blogspot.com
Comments
Post a Comment