[null, null, null, null, {"document_url": "https://auth0.com/blog/whats-new-in-angular6/", "unformatted_src": "https://cdn.auth0.com/blog/angular6/urlissues.png", "src": "https://cdn.auth0.com/blog/angular6/urlissues.png", "formatted_filename": "urlissues", "alt_text": "What's new in Angular 6 - URL Serialization"}, null, null, null, {"document_url": "https://auth0.com/blog/whats-new-in-angular6/", "unformatted_src": "https://cdn.auth0.com/blog/resources/auth0-centralized-login.jpg", "src": "https://cdn.auth0.com/blog/resources/auth0-centralized-login.jpg", "formatted_filename": "auth centralized login", "alt_text": "Auth0 login screen"}, null, null, null, null, {"document_url": "https://auth0.com/blog/whats-new-in-angular6/", "unformatted_src": "https://cdn.auth0.com/blog/guest-authors/pencil.png", "src": "https://cdn.auth0.com/blog/guest-authors/pencil.png", "formatted_filename": "pencil", "alt_text": "Auth0 Guest Author Program"}, null]
Angular 6 Release: What’s New?

Fresh out the oven is Angular 6. It brings some new features and enhancement to one of the most popular JavaScript frameworks for crafting mobile, desktop and web applications. Learn what's new in Angular! 
TL;DR: In this article, I'll cover the new features in Angular 6 and several other changes and deprecations.

Angular is a very popular framework that is actively maintained by Google. Its popularity and wide adoption have been driven by how it keeps evolving and getting better by the day. Angular powers a lot of web platforms such as Google Adwords, Google Fiber, Adsense, and Winc.

The previous major Angular version was Angular 5. We covered the major features and bug fixes that shipped with Angular 5 before. Now, 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.

1. Improved Service Worker Support

Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will redirect navigation requests that don't match any asset or data group to the specified index file.

"Angular 6 now supports configuration of navigation URLs in Service Workers." By default, a navigation request can have any URL except for those containing __ and URLs containing a file extension (i.e a .) 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, you can specify an optional navigationUrls list in ngsw-config.json. which contains URLs or simple globs. Only requests whose URLs match any of the positive URLs/patterns and none of the negative ones (i.e. URLs/patterns starting with !) will be considered navigation requests and handled the right way by the service worker.

Before now, the service worker would enter a degrade mode where only existing 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 until connectivity to the server is restored.

Furthermore, a helper script, safety-worker.js, has been added to the service worker package to enable easy deactivation of an existing service worker in production.


2. Goodbye Template Element

The <template> element was deprecated long ago, precisely in Angular 4. It has been removed completely in Angular 6.

The <ng-template> element should be used instead.



3. Better URL Serialization

Before now, there were issues around routes and URL serialization such as this below: What's new in Angular 6 - URL Serialization

In Angular 6, issues like the one above have been fixed and:

It's also important to know that parentheses and semicolons denoting auxiliary routes will, in any case, show up in their decoded shape except for parentheses and semicolons used as values in a segment or key/value pair for matrix params which will show up encoded.

4. Support Added for Custom Elements

This is crazy. When I discovered this, I jumped! Let me explain before you get too excited.

The support is currently experimental and unstable. It's targeted to land and become stable in the Angular 6.x release cycle.

With this support, developers can simply register Angular Components as Custom Elements. Once registered, these components can be used just like built-in HTML elements. They are HTML Elements, so why not?

So, Angular developers can do something like this:

5. Forms Validation in Angular 6

Before now, ngModelChange was always emitted before the underlying form control was updated.

If you had a handler for the ngModelChange event that checked the value through the control, the old value would be logged instead of the updated value. This is not the case if you pass the value through the $event keyword directly.

Check out this example:

Passing the value through the $event keyword directly

Using a Handler

In Angular 6, ngModelChange is now emitted after the value is updated on its form control.

"In Angular 6, ngModelChange is now emitted after the value is updated on its form control." 6. Multiple Validators for Form Builder Array

In previous versions of Angular, you could set only one validator on a FormArray field with the FormBuilder.array method.

In Angular 6, you can set multiple validators with the FormBuilder.array method:

7. Token Marking for Runtime Animation Context

In Angular 6, it's now possible to determine 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.

8. Hello Schematics

Schematics is a new scaffolding library that's used by the Angular CLI to generate custom templates. The Angular team has always been keen on improving developer productivity, which explains the birth of schematics.

With Schematics, you can easily create Angular libraries like so:

First, install the necessary schematic tools:

Next, create a new angular-cli project:

Finally, you can just run schematics like so:

A new lib directory will be generated for you inside the src folder. The lib directory ships with a sample demo and the build tools necessary for a typical Angular package.

Check out this deep and excellent guide to Schematics.


Check out other Angular 6 updates here.

Upgrading to Angular 6

The Angular team built an awesome tool to make upgrading as easy as possible. Angular 6 upgrade tool
 











Angular 6 came loaded with new features and significant improvements. Kudos to the Angular team on making Angular faster and better to use.

Have you upgraded to Angular 6 yet? What are your thoughts? Did you notice any significant improvement? Let me know in the comments section! 😊

 Angular 5 Release: What’s New?
