Article

Tech Tuesday: Angular 5?! Already?!

12 December 2017 | Samuel Gregory | About a 4 minute read
Tags: angular, frameworks, front-end, JavaScript, Tech Tuesday


GIVEN you are a developer
AND you want to know more about the latest additions to 
frameworks and libraries
WHEN you read this article
THEN you should be more informed about Angular 5!

 

This will be the last time any post goes out like this about an Angular update, at least for a while now. Unlike the traumatising change from Angular 1.x to 2, we now refer to the 1.x Angular as ‘AngularJS’ and any updates to >2 we just refer simply as ‘Angular’. Unlike the name suggests, this is not a breaking change to Angular 4.

 

This new release of Angular focuses on making it smaller and faster. Some much welcome changes to the Angular CLI, and under-the-hood updates means they accomplish many of these without any updates to your code. Update now! But please read on.

 

Angular 5 now uses;

  • – Angular CLI updated to 1.5 and will generate Angular 5 projects by default.
  • – RxJS has been updated to version 5.5.2 (more on that later).
  • – Now uses Typescript 2.3 (again, more on that later).

 

The CLI’s build process now reduces your bundle size by removing decorators from the run-time code. It also marks parts of your application as ‘pure’ therefore, does not include them in the bundle. This ultimately results in a faster boot-time of your app. Nice.

AOT (Ahead of Time) Flag. The new standard.

The Angular compiler now builds the code in increments, meaning faster rebuilds with an option to remove whitespace. You can further reduce rebuild time by letting Angular take care of the Typescript transforms with the AOT flag. This means faster rendering and before the browser compiles it.

ng serve --aot

Soon this will be the default but for now, it’s under a flag. From the Angular release notes…

“When performing an incremental AOT build of [Angular], the new compiler pipeline saves 95% of the build time (from more than 40 seconds to less than 2 seconds on our development machines).”

httpModule Deprecation. So long, dear friend.

Ye olde faithful httpModule has now been deprecated and uses a new set under @angular/common/http, use the HttpClientModule and remove any map(res => res.json()). The existing httpModule still exists but they recommend moving to the new one as it will be removed in the future.

import { HttpClientModule } from '@angular/common/http'

Form Validation on submitting!

Angular form validation has been updated so that forms are now able to validate on submit as opposed to always validating on blur. You achieve this by giving Template Forms an ngFormOptions attribute.

 

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

 

or on individual elements…

 

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

 

on Reactive Forms…

 

new FormGroup(value, {updateOn: 'blur'}));

 

Internationalised Number, Date, and Currency Pipes

These pipes have been improved since before they were using the browsers localisations, which caused some unwanted effects and warranted the use of i18n polyfills. Angular now uses its own implementation. If you do not need this yet, you’ll need to import DeprecatedI18NPipesModule to continue using the now deprecated pipes.

 

exportAs component names

exportAs is a lovely little addition, meaning you can reference your component under multiple names. A simple update to your component decorator.

 

exportAs: 'matButton, matAnchor'

 

RxJs Operators

Angular uses a new addition to RxJs called “lettable operators”. These new operators eliminate the side effects and the code splitting / tree shaking problems that existed with the previous ‘patch’ method of importing operators. You can now simply import all of your operators form 'rxjs/operators'– much cleaner.

 

import { map, filter } from 'rxjs/operators';

 

New Router Lifecycle Events

You are now able to track the cycle of the router allowing you to show animations or measure performance. The full list is here;

 

– GuardsCheckStart

– ChildActivationStart

– ActivationStart

– GuardsCheckEnd

– ResolveStart

– ResolveEnd

– ActivationEnd

– ChildActivationEnd

 

Zone speed improvements

Zones are now faster and if you don’t require them, they are omittable entirely which increases performance!

 

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

Angular Universal State Transfer API and DOM Support

ServerTransferStateModule and BrowserTransferStateModule have been added so that you can take advantage of server-side rendering, and transferring state to the client meaning you could reduce HTTP request made by the client.

 

Preserve Whitespace

Whitespace has always been preserved when compiling your code. Now you can remove it in your component decorator.

preserveWhitespaces: false

or in your tsconfig.json

"angularCompilerOptions": {
    "preserveWhitespaces": false
},

Replace the ReflectiveInjector with StaticInjector

ReflectiveInjector has been replaced with the StaticInjector, removing the need for polyfills and reducing the size of your code.

Before

ReflectiveInjector.resolveAndCreate(providers);

After

Injector.create(providers);

Check out the official blog post from Angular but there seems no reason to not update so go do it!

Read More From This Author

Share this blog post

Related Articles

Careers

We’re looking for bright, dynamic people to join our team!

Discover More Roles