Angular 6 Features

Angular 6 Logo

Big News !!!

Angular 6 is officially released. It is released with Angular CLI 6 and Material 6. Angular v6 is the first release of Angular that unifies the Framework, Material and CLI. 

Angular 6 is released with great features like Angular Elements, new Schematics, PWA, Angular CLI 6 and Material 6 (Refer this for more details). 

Step by Step Guide to Upgrade Angular 5 app to Angular 6.

Angular 6 Features (Final Release)

Dependency Updates

  • @angular/core now depends on
    • TypeScript 2.7
    • RxJS 6.0.0
    • tslib 1.9.0
  •  @angular/platform-server now depends on Domino 2.0

Features

  • animations
  • Only use the Web Animation API -polyfill alongside AnimationBuilder.
  • Exposed two new parameters : element and params within transition matchers.
  • common
  • The utility functions formatNumber, formatPercent, formatCurrency, and formatDate used by the number, percent, currency and date pipes are now available for developers who want to use them outside of templates.
  • compiler
  • Allows the id of an NgModule to be dynamically computed if needed.
  • “enableIvy” compiler option : The “enableIvy” compiler option is the initial implementation of the Render3 (or Ivy) code generation. This commit enables generation generating “Hello, World” ( example in the test) but not much else. It is currently only useful for internal Ivy testing as Ivy is in development.
  • Now you can create single-line, multiline and jsdoc comments.
  • Require Node 8 as the runtime engine : @angular/compilar-cli with @angular/cli runtime requirements.
  • core
  • optional generic type for ElementRef
  • Adding the binding name to the error message received by the user gives extra context on what exactly changed. Information passed to  expressionChangedAfterItHasBeenCheckedError when called from checkBindingNoChanges, by taking the binding name from the bindingDef and making the value passed to the error be $bindingName: $value
  • Adds task tracking to Testability (find details in below RC & Beta features).
  • forms
  • Handle string with and without line boundary on pattern validator.
  • Multiple validators for FormBuilder.array method.
  • platform-browser
  • Adds token marking which the type of animation module nearest in the injector tree
  • Just leave a warning (do not throw an error) and perform no functionality when Hammer.js not loaded.
  • router
  • Add navigationSource and restoredState to NavigationStart event
  • service-worker
  • Add support for configuring navigations URLs
  • Add helper script which will uninstall earlier Service Worker

Find detail information of angular 6 features in RC & Beta Release.

Angular 6 ChangeLog

Angular 6 features with RC and Beta release.

Sixth RC version of Angular 6 – rc.5 is released on 14th April, 2018.  before that Angular 6 rc.2, rc.3 & rc.4 were released with major bugfixes and minor feature. 

Lets analyse the Angular 6 rc.2 to rc.5 versions.

Angular 6 – rc.5

Angular 6 – rc.5 is released with four bug fixes and two great features.

Bugs of compiler, compiler-cli, elements and service-worker package are fixed.

Two new great feature released in RC.5 are : 

  • Features
  •  Added token marking which the type of animation module nearest in the injector tree. 
    • Current Behaviour: Currently, it is not possible to determine if a component is running in a BrowserAnimationsModule or NoopAnimationsModule context at runtime.
    • New Behaviour: A token is provided as a marker to be able to determine which animation context is being used for the component at runtime.
  • Added support for configuring navigations URLs
    • Current Behaviour: The ServiceWorker will redirect navigation requests that don’t match any asset or data group to the specified index file. The rules for a request to be classified as a navigation request are as follows:
      1. Its mode must be navigation.
      2. It must accept a text/html response.
      3. Its URL must match certain criteria (see below).

      By default, a navigation request can have any URL except for:

      1. URLs containing __.
      2. URLs to files (i.e. containing a file extension in the last path segment).

      While these rules are fine in many cases, sometimes it is desirable to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).

    • New Behaviour: 

      It is now possible to specify an optional navigationUrls list in ngsw-config.json, which contains URLs or simple globs (currently only recognizing !, * and **). 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 accordingly by the ServiceWorker).

Angular 6 – rc.4

It is the fifth RC version of Angular 6 – is released on 12th April, 2018.  

Angular 6 – rc.4 is released with seven bug fixes and one minor feature.

  • Features
  • Added Schematics which adds the appropriate polyfill for Custom Elements.

Angular 6 – rc.3

Angular 6 – rc.3 was released on 6th April, 2018 with two bug fixes in bazel and compiler-cli package.

No feature release in rc.3.

Angular 6 – rc.2​

Angular 6 – rc.2 was released on 5th April, 2018 with seven bug fixes and one minor feature. As per the official schedule, rc.2 was the last RC version release.

  • Features
  • compiler-cli: lower loadChildren fields to allow dynamic module paths 

Previous Post : Features of Angular 6 till angular 6 – rc.1 released.

Angular 6 – rc.1 released on 30th March, 2018.  Find the features of angular 6 –rc.1 below,

Angular 6 – rc.1

Angular 6 – rc.1 is released with 19 bug fixes and two new features.

Some of the bugs of animations, bazel, common, compiler, core and service-worker package are resolved.

also two new features are released in angular 6 – rc.1

  • Features
  • prefix private-export (barred-latin-o) symbols
    • This allows a bundle index to be re-exported by a higher-level module without fear of collisions.
  • lower @NgModule ids if needed
    • This change allows the id of an NgModule to be dynamically computed if needed.

These features are not much important as per the developer’s point of view.  But these can be beneficial for package building. 

No breaking changes in angular 6 – rc.1.

Angular Application Development

Previous Post : Features of Angular 6 till angular 6 – rc.0 released.

Angular 6-rc.0 is released on 21st March, 2018, 

before that one more beta version beta.8 of angular 6 is released. Angular 6 – beta.8 was not planned as per official schedule 

Let’s one by one analyse the features and breaking changes of angular 6 –rc.0 and angular 6 –beta.8.

Angular 6 – beta.8

Angular 6 – beta.8 released with lot of new features, bug fixes and some breaking changes.

  • Features
  • Adds support for creating Custom Elements based on Angular Components.
  • animations: expose element and params within transition matchers.
  • bazel: change ng_package rule to APF v6
  • Now You can create singleline, multiline and jsdoc comments.
  • compiler-cli : add resource inlining to ngc
    • Whether to replace the templateUrl and styleUrls property in all @Component decorators with inlined contents in template and styles properties.
      When angularCompilerOptions { enableResourceInlining: true } the .js output of ngc will have no lazy-loaded templateUrl or styleUrls. Note that this requires that resources be available to load statically at compile-time.
  • TypeScript 2.7 support : require node 8 as runtime engine 
  • Improvements to the Testability API : add task tracking to Testability

    • Users can now pass a timeout to whenStable(). If there are still macrotasks pending when the timeout occurs, the callback will receive a list of pending tasks (provided by the TaskTracking zone spec).

      whenStable() also now accepts an optional callback to invoke whenever the state of pending macrotasks changes. If this callback returns true, whenStable() will cancel the pending done callback, allowing users more control over which macrotasks they wait for.

  • Mark angular packages as side-effect free: This flag is picked up by webpack v4 and used for more agressive optimizations.
  • Tree-shakeable providers API updates :

    • Rename @Injectable({scope -> providedIn}).
      Instead of {providedIn: APP_ROOT_SCOPE}, accept {providedIn: 'root'}. Also, {providedIn: null} implies the injectable should not be added to any scope.

  • Update tslib to 1.9.0
  • Breaking Changes
  • The <template> tag was deprecated in Angular v4 to avoid collisions (i.e. when using Web Components).
    • till now we can use that tag using by setting 
      # tsconfig.json
{
  # ...
  "angularCompilerOptions": {
      # ...
      # This option is no more supported and will have no effect
      "enableLegacyTemplate": [true|false]
  }
}

      beta-.8 removes support for <template>.  <ng-template> should be used instead.

  • it is no longer possible to import animation-related functions from @angular/core. All animation symbols must now be imported from @angular/animations.
  • application/library package.json need to be updated to provide tslib 1.9.0 or higher to resolve incompatible peerDependencies warning.

Angular 6 – rc.0​

Angular v6 framework is now feature complete, the cli and material/cdk parts of the v6 release and other integrations are still in works and will be completed by the time v6.0.0 is released.

It is released with six bug fixes and two new features. 

  • Features
  • Update the package output of build.sh to APF v6
  • Upgrade rxjs to 6.0.0-beta.0, please see this RxJS Upgrade Guide for more info
Angular Application Development

Previous Post : Features of angular 6 till angular 6 – beta.7 released.

The beta versions for Angular 6 is on a roll. Recently Angular 6.0.0-beta.7 is released.

Angular 6 will be the backward compatible with the Angular 5. So it will be easy to upgrade angular 5 application to angular 6.

Angular beta versions are released with a lot of bug fixes, new features and breaking changes.

Let's see the important Angular 6 features .

Ivy Renderer: Ivy is a new backward-compatible Angular renderer focused on further speed improvements, size reduction, and increased flexibility. The Angular Team promises that switching to Ivy rendered will be smooth. This important feature will reduce the code size and makes compilation faster.

Bazel Compiler: Since source code changes often happen in small increments, it doesn’t make sense to rebuild the entire application for every little change. Instead, we should only rebuild code that actually changed, and code that depends on the changes. Bazel only rebuilds what is necessary. With advanced local and distributed caching, optimized dependency analysis and parallel execution, you get fast and incremental builds. So we can assume that this would be the important feature of the incremental build.

Closure Compiler: Closure Compiler is the bundling optimizer used to create JavaScript artifacts for nearly all Google web applications. The Closure Compiler consistently generates smaller bundles and does a better job in dead code elimination compared to Webpack and Rollup bundlers.

Component Dev Kit (CDK): CDK is already included in an Angular Material library, which offers more than 30 UI components.  CDK allow us to build our own library of UI components using Angular Material.

Service Worker: Service worker is a script that runs in the web browser and manages caching for an application. Service worker is included in angular 5. In angular 6 service worker comes with bug fixes and additional feature.

Important Angular 6 features with respect to the development purpose

  • Typescript 2.6.x support
  • Forms Features
  1. AbstractControl statusChanges now emits an event of ‘PENDING’ when you call AbstractControl markAsPending. Previously it did not emit an event when you called markAsPending.
  2. ngModelChange is now emitted after the value/validity is updated on its control.
    Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">
onChange(value) {
     console.log(value);   // would log updated value
}

However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:

<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
onChange(ngModel: NgModel) {
   console.log(ngModel.value);        // would log old value, not updated value
}

Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.

onChange(ngModel: NgModel) {
   console.log(ngModel.value);       // will log updated value
}
  1. Multiple validators for array method of FormBuilder

According to current documentation, we can set only one validator on FormArray field with FormBuilder.array method. Now you can add the multiple validators for array method as shown below :

For example:

questionForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.questionForm = this.formBuilder.group({
    text: ['', Validators.required],
    options: this.formBuilder.array([], [MyValidators.correctCount, MyValidators.totalCount])
  });
}

  1. Handle string with and without line boundary on pattern validator.
    Previously, Validator pattern only works with string without line boundaries (^ & $), the validator will then add them itself to the string automatically.
    In a new feature, it will only add those boundaries characters if they’re missing
  • Router: Added navigationSource and restoredState to NavigationStart event. this way you can know that if an navigation was triggered imperatively or via the location change.
  • Optional generic type for ElementRef 
@ViewChild('my-element') myElement:ElementRef;
Angular Application Development

Find Angular History here : Angular Version History