“In God We Trust. All Others Must Bring Data.” – W. Edwards Deming, Statistician, Professor, AuthorWhat is it that you imagine when you think about a futuristic world? Influence from Hollywood movies and science fiction have often found us thinking in a cliched direction... Read More
If you have been an avid user of Angular 5, it’s time to come out of your comfort zone as the next version of the framework has been released -
Angular 6.
Angular has already gone through a power packed year in 2017 with 2 major releases in 9 months with the arrival of Angular 4 in March and Angular 5 in November 2017.
While we saw Angular 5 being centered around being faster, smaller, and easier to use, Angular 6 aims to tread on the same path.
Angular 6 Updates
1. Angular Elements
It is a huge task to create widgets that can be directly added to any existing web pages.
But this will become easier with Angular 6 since you can now easily create an Angular component and publish it as a Web Component which can be directly used in any HTML page.
Angular Elements make it possible now.
For example, if you have developed Single-Page Application by using JavaScript and jQuery, you will now be able to use Angular-created Web Components in the pages of this app.
This also makes it easier migrate to Angular framework for web application development.
2. Ivy Renderer
This is new backward compatible Angular Renderer which offers a host of benefits like:● Better speed improvements
● Size reduction of code via gzipped
● Faster compilation of code
● Size reduction of app
● Increased flexibility
● Simpler process of Debugging
3. Closure Compiler
Almost all Google Web Applications can be created via the Closure Compiler which is a bundling optimizer that can create Javascript modules.As compared to other bundlers such as Webpack and Rollup, this compiler can consistently generate smaller bundles.
It is also better at dead code elimination.
4. Bazel Compiler
Bazel is a widely used compiler at Google that powers their 500+ apps built in Angular.More advanced local and distributed caching along with optimized dependency analysis and parallel execution can be expected in this upgrade.
This will make it easier to launch incremental builds by making change only to the code that involves the changed features.
5. Component Dev Kit (CDK)
Further improvements and additions to the CDK can be expected in the Angular 6 release.CDK is used by the Angular Material Library, which involves more than 30 UI components.
CDK also allows you to build your very own library!
Introduced in December 2017 and being an important component of the framework now, the Angular team is expected to introduce valuable additions such as the Tree Component to help visualize tree structures like a list of files.
CDK Packages in Angular6. Router
There is no way to know in Angular if navigation has been triggered by Location change or due to an urgent calling.There should be a capability to handle these two cases separately.
For example, this is useful in cases like scroll position restoration.
The new release plans to add a navigation source field along with a restored navigation ID that will go a long way to help in this domain.
7. Schematics and Ng Update
If you plan to create to your Angular template and want to explore the same with Angular CLI, this is where Schematics will come to your rescue.Schematics will enable you to create your very own code transformations, just like an Ng update.
An Ng update can be used to automatically update the project dependencies and make automated version fixes to the framework.
8. Service Worker
Important bug fixes and crucial additional features in the Service Worker are expected in the latest Angular 6 update.The Service Worker is a script that runs in the web browser.
It is useful to manage cache for a web application that improves the load-time for regular users and make the functioning of the app faster.
How to Download the Angular 6 Beta Version
You can download the Beta version of Angular 6 directly by visiting Github.It can also be downloaded by running a terminal command. Follow these steps for the same:
Launch the terminal
Type the command npm install -g @angular/cli@next
Create a new project via ng new
Alternatively, you can also use the command ng update –next to update a project.
Additional List of Features
To conclude, here is a complete list of features included in the First Release Candidate neatly compiled by Jaxenter:- aio: add hack, remove me (#22413) (4d506ac)
- aio: migrate embedded comp to elements (#22413) (7c9b411)
- aio: update payload size (#22413) (400460c)
- animations: expose element and params within transition matchers (#22693) (58b94e6)
- bazel: change ng_package rule to APF v6 (#22782) (88b3198)
- compiler: support for singleline, multiline & jsdoc comments (#22715) (3b167be)
- compiler-cli: add resource inlining to ngc (#22615) (b5be18f)
- compiler-cli: require node 8 as runtime engine (#22669) (c602563)
- core: add task tracking to Testability (#16863) (37fedd0)
- elements: add polyfill for elements es5 shim (#22413) (863aff1)
- elements: add support for creating custom elements (#22413) (22b96b9)
- elements: add tests for component factory strategy (#22413) (d2be675)
- elements: another polyfill solution (#22413) (cf3ff7d)
- elements: fix lint (#22413) (0b45dfa)
- elements: fix payload size (#22413) (fe21437)
- elements: fix test (#22413) (44f637a)
- elements: George’s comments (#22413) (46efd4b)
- elements: injector create (#22413) (87f60bc)
- elements: make bazel happy (#22413) (39a12d2)
- elements: provide type, not factory; remove config need (#22413) (1936808)
- elements: rebase (#22413) (d72f445)
- elements: remove attribute/input from config (#22413) (688096b)
- elements: rename API to createCustomElement (#22413) (167fdf7)
- elements: update package.json with latest (#22413) (2e450f6)
- mark angular packages as side-effect free (#22785) (44de10e)
- tree-shakeable providers API updates (#22655) (db56836)
- update tslib to 1.9.0 (#22667) (489fec1)
- bazel: prefix private-export (barred-latin-o) symbols (#23007) (27e14b2)
- compiler: lower @NgModule ids if needed (#23031) (bd024c0)
- compiler-cli: lower loadChildren fields to allow dynamic module paths (#23088) (550433a)
What are your expectations form the Angular 6 and how impressed are you with this release? We'd love to hear from you -