What’s New in Angular 6
As many of you know Angular 6 is already out. At outset, this release of Angular 6 is lighter, faster, and easier. Developers will start loving it more as it makes their development future much easier. In this article we are going to cover the latest major release, Angular 6, which focuses on making Angular smaller and faster to use.
Let’s go through the major changes in Angular 6.
IMPROVED SERVICE WORKER SUPPORT
Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will readdress navigation requests that don’t match any asset or data group to the specified index file.
By default, a navigation request can have any URL and URLs containing a file extension in the last path segment. Sometimes it is great to be able to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).
Now, the developer can specify an optional navigationUrls list in ngsw-config.json. Before that, the service worker would enter a degrade mode where only current clients would be served if either the client or server was offline while trying to fetch ngsw.json. In Angular 6, the service worker remains in the current mode till connectivity to the server is restored.
NG UPDATE
The new CLI command analyzes your package.json and uses its knowledge of Angular to recommend updates to users application. It will help the developers to adopt the right version of dependencies, and keep dependencies in sync. In addition to updating dependencies and earl dependencies, ng update will apply needed transforms to your project.
CLI WORKSPACES
CLI v6 now offers support for workspaces containing various projects, such as numerous applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration. Each CLI workspace will have projects, each project will have targets, and each target can have configurations.
FORMS VALIDATION IN ANGULAR 6
Before, ngModelChange was always emitted, earlier the underlying form control was updated.
If the user had a handler for the ngModelChange event that checked the value through the control, the old value would be logged instead of the simplified value. This is not the case if the user passes the value through the $event keyword directly.
TOKEN MARKING FOR RUNTIME ANIMATION CONTEXT
In Angular 6, it’s now possible to define which animation context is used for a component at runtime. A token is provided as a marker to determine whether the component is running a BrowserAnimationsModule or NoopAnimationsModule context at runtime.
SCHEMATICS
Schematics is a new shell that is used by Angular CLI to create custom templates. The Angular team has always been keen on improving developer productivity which explains the birth of schematics. With schematics the developer can easily create Angular libraries.
First, install the necessary schematic tools:
Next, create a new angular-cli project:
Finally, the developer can just run schematics like so:
A new lib directory will be generated inside the src folder. The lib directory ships with a sample demo and then build tools necessary for a typical Angular package.
THE VERDICT
Angular 6 came full with new features and significant improvements. Thanks to the Angular team on making Angular faster and better to use.
Have you upgraded to Angular 6 yet? What are your opinions? Did you notice any major improvement? Let us know!