During the opening keynote presentation of this year's ng-conf the Angular team has announced the latest release of the beloved framework - Angular 6.
This release comes with some exciting additions - and in this article, we'll review those.
Angular elements are, in my opinion, one of the most significant features of this new release. It essentially allows the creation and reuse of Angular components in a non-Angular environment. So we can now create an Angular component, wrap it in a Custom Element and re-use that in a Vue.js app or a React app.
With every new Angular release, folks at Google try to make the framework faster by applying various improvements and enhancements. In this latest released they introduced a new rendering engine called Ivy.
Ivy is acting as a renderer as well as a view engine - this means that it is going to take the components and their templates and compile them to HTML and JavaScript accordingly. Ivy uses two fundamental concepts, which are also new to Angular6: Locality and tree-shaking.
From a development perspective there aren't any changes - i.e. we developers should carry on creating components as before, but the underlying code that would generate the corresponding HTML and JavaScript is going to be lighter, and the process of transforming the code is also a lot faster. So this update is transparent to us but comes with a lot of benefits.
These benefits include faster build cycles and smaller builds. Furthermore, the way Ivy has been written it is now possible to debug templates (including the addition of breakpoints).
At the moment the way Angular compiles files includes a static analysis of the entire codebase and based on that it'll generate metadata.json - a file that contains compile instructions. Of course, having to do static analysis of the entire codebase slows things down and has some additional drawbacks.
Locality means that Ivy (discussed earlier) compiles one file at a time - it looks at the component, and it is not able to see the dependencies of the component.
Tree shaking is not an Angular feature, but Angular does utilise it for Ivy. Tree shaking is an optimisation step done during build time - imagine a bunch of dependencies for a given project - sometimes some dependencies are not used, tree shaking can simplify the project dependency tree by removing all the unused dependencies and therefore simplifying the final build.
With Angular 6 the default compiler option is going to have default activated setting to preserve whitespaces. The switch can be accessed in the tsconfig.json file, and it's called preserveWhitespaces.
Angular 6 enables two things related to Service Workers. The first one is related to navigation: using a service worker we can now redirect navigation requests - we can achieve this by using a file called ngsw-config.json. This file contains which files and data URLs should the Angular Service worker cache and how it should update the cached files as well as the data.
Furthermore, a safety-worker.js file is now also part of the configuration which allows for an easy deactivation of existing service workers.
<template> elementAs of Angular 4, the <template> element has been deprecated, and in Angular 6 it is now completely removed.
This is related to a bugfix whereby characters such as parentheses were not appropriately serialised in the Route parameters. Angular6 fixes this issue by encoding them accordingly along with the correct encoding of semicolons, the plus sign and the ampersand as well in the URL path.
Before ngModelChange would still show the old value if a handler were passed to it as opposed to the $event keyword. Now, Angular 6 will show the updated value when using a handler as well.
Before only a single validator could be added to a FormArray - in Angular6 multiple validators can be added using the FormBuilder.array() method: FormBuilder.array([], [Validator1, Validator2, ValidatorN]);
The team behind Angular is always keen on making developer productivity a better experience. The goal of schematics is to improve this productivity mentioned above via the Angular CLI. Think about situations where we have to set up a package - like Angular Material. We need to install it, add the appropriate modules, grab a stylesheet and add it to the application as well. Witch Schematics we can now automate such tasks. There's a lot to learn about Schematics, please go ahead and read more on this topic.
Angular6 now uses RxJS 6.0
Lazy loading is not a new feature in Angular6, but the fact that lazy loading is now possible without the router is new. Lazy loading is a feature that makes sure that only the modules that are required to start the application are loaded as opposed to loading everything. There are two sides to lazy loading - runtime and build time. For lazy loading at runtime, the router provided us with an API however the CLI did not have similar support. With Angular6 this is changing - the angular.json config file now can specify an array of modules to be loaded lazily.
ng add & ng updateThe Angular CLI now has these two additional commands. ng add allows us to add a new library to our project while ng update can update all the @angular dependencies from package.json. Note that ng add will also modify the codebase (similarly to how adding a new component updates the codebase here and there)
Some further bugfixes are part of the Angular 6 release cycle - discussing those are outside the scope of this article, but please consult the 6.0 release log here - especially carefully review the possible breaking changes section: https://github.com/angular/angular/blob/master/CHANGELOG.md#600-2018-05-03