Angular 5 New Features at A glance

Angular, Google’s popular JavaScript framework now become faster, smaller, and easier than ever with new Angular 5.0.0 updated from previous version 4.3.0. Angular become more better to develop progressive web apps and greater support for Material Design capabilities. Angular 5, code named “Pentagonal-Donut” brings some new features to build performance packed responsive Mobile, Web and Desktop applications.

Angular 5 is the major release containing new features and bug fixes to make development experience much faster and easier. It is interesting to check out major new features just at a glance.

     Build Optimization with CLI

Now CLI 1.5 generates Angular 5 projects by default. Yes, build optimizer now included CLI as default to make application bundle much smaller. Marking the application as “pure” to improve the tree shaking provided by existing tools also eliminate additional parts of the application that aren’t needed.

Build Optimizer also removes Angular decorators from the application’s runtime code. Decorators just used by compiler but aren’t needed at run time then it can be removed. Further reducing the JavaScript bundles Size that help to increase the booting speed of the application for app users.

Google is still building and improving support in the command-line interface (CLI).

     Compiler Improvement

Angular compiler now improved for incremental compilation support, helping for faster rebuilds with AOT. Removing whitespace to make bundle smaller right through new decorator’s features.

TypeScript Transforms if the key enhancement to operate Angular compilers where incremental rebuilds dramatically faster. It is possible to hook TypeScript compilation pipeline using Typescript transforms feature that now support TypeScript 2.3, 2.4, 2.5 (Now added TypeScript 2.6 with latest release – January 2018)

Just to run “ng serve” with AOT flag turned on make it all happen to take advantage of this new feature. AOT compilation to become faster for developers.

Also, major improvement to preserve white space and Improved Decorator Support.

     State Transfer API and DOM Support

Two modules as ServerTransferStateModule and the corresponding BrowserTransferStateModule now added. Using these module applications can be rendered over single HTTP request once the application makes it on client-side.

State between Server-side and Client-side app version can be easily shared and easing server-side rendering (SSR) of Angular applications.

It is now easier to share application state between the server side and client-side versions of your application. Rendering an Angular applications on the server then bootstrapping on top of the generated HTML, this way adding even support for scrapers and crawlers that don’t support JavaScript that help increasing app performance.

Also, added Domino to the "Platform-server" Now DOM manipulations support within server-side contexts, support for third party JS and Component libraries.

     HttpClient IN & http OUT

Now “http” deprecated in version 5, “http” module was in use for HTTP requests in Angular applications before version 4.3. In version 5 “HttpClient” API to use in all apps with below key features.

• Use Interceptors for middleware logic to insert into the pipeline.
• Immutable request/response objects.
• Synchronous response body access, Typed and support for JSON body types.
• Request upload and response download -Events Progress
• No need to parse JOSON explicitly as now assumed default
• Response Objects / Immutable Request
• Flush based testing and post-request verification

     Internationalized Number, Date, and Currency Pipes

Earlier, developers were relying on i18n APIs for browser to provide number, date, and currency formatting and needed polyfill for most developers. Producing inconsistent results across browsers that did not meet standardization.

This is one of the best enhancement in version 5, now developer do not need to use i18n polyfills anymore for standardization on number, date, and currency pipes across the browsers. Now out of the box new number, date, and currency pipes that increase standardization across browsers without i18n polyfills.

For some reason, if want to use old behavior then import DeprecatedI18NPipesModule to get access to the old behavior. You may like to refer change log

     “StaticInjector” replaced “ReflectiveInjector”

Injector “ReflectiveInjector” no longer require as it is replaced by “StaticInjector” to remove more polyfills, helping to reduce application size.

Before >        ReflectiveInjector.resolveAndCreate(providers);

After   >         Injector.create(providers);

     New Router Lifecycle Events

Router hooks added for tracking router cycles from the beginning of running guards until completion of activation. New lifecycle events to the router to track the cycle of the router from the start of running guards through to completion of activation. It is useful to measure performance of guards and/or resolvers or showing a spinner on a specific router outlet when a child is updating.

New events are as below:

GuardsCheckStart

ChildActivationStart

ActivationStart

GuardsCheckEnd

ResolveStart

ResolveEnd

ActivationEnd

ChildActivationEnd.

     Improved Zone speed

Zone speed become faster by default, it is possible to bypass zones completely for better performance when require. Just use ‘noop’ as app “ngZone” in app bootstrap.

exportAs

This is good to make new names without breaking existing code, can make new names in Angular microsyntax, support for multiple names for app components / directives. Useful in Angular Material project in its prefix migration and can help other component authors as well.

     Forms Validation

updateOn Blur / Submit for form

Instead of on every input event, now run validation and value updates on blur or on submit. Forms are most important part so server-side validation triggers or change timing can now be done at the control level or specify it for an entire form. Now specify ‘asyncValidators` directly in the options object, rather than specifying it as the third parameter.

Template Driven Forms:

Before >      <input name="firstName" ngmodel>

After   >       <input name="firstName" ngModel [ngModelOptions]="{updateOn: ‘blur’}">

          or

         <form [ngFormOptions]="{updateOn: ‘submit’}">

Reactive Forms:

Before >        new FormGroup(value);

           new FormControl(value, [ ], [myValidator])

After   >          new FormGroup(value, {updateOn: ‘blur’}));

           new FormControl(value, {updateOn: ‘blur’, asyncValidators: [myValidator]})

     CLI v1.5

Now CLI v 1.5 generates Angular v5.0.0 projects, updated use of tsconfig.json files to follow TypeScript standards more strictly and by default, CLI itself configures TypeScript without files or include sections. Now automatically add lazy loaded route so no longer manually need to specify a list of files or include in your tsconfig.json.

     RxJS 5.5

RxJS version 5.5.2 or later can be used now, it empowers to avoid the side effects of the previous import mechanism with a new way of using RxJS called “lettable operators”. new operators eliminate the side effects and the code splitting / tree shaking problems that existed with the previous ‘patch’ method of importing operators.

More, RxJS now distributes a version using ECMAScript Modules. Now new Angular CLI pull it by default, reducing bundle size. But if not using the Angular CLI then it still need to point to the new distribution.

     Animations

New transition aliases as “:increment”  and “:decrement” , Now animation queries also support negative limits, in which case elements are matched from the end rather than from the beginning like that.

Angular 5 with new features, significant improvements and bug fixing will make progressive app development much easier and enhancing development experience, however improvement continues with the new latest version 5.2.0 in January 2018. Angular 5.2.0 now support TypeScript 2.6 and Improved type checking for templates, Improved Router Param & Data Inheritance. In future will see more updates on Angular 5.

Next, Angular 6 soon may be on the way to release…