Introduction to Angular 5

DZone 's Guide to

Introduction to Angular 5

Take a look at the features that make Angular 5 a great option for your next development project, and see if is the right fit for you.

· Web Dev Zone ·
Free Resource

Angular is a comprehensive JavaScript framework that is frequently used by developers for building cross-platform applications. Angular 5 applications are quick, light, and simple to use. Now, it also supports Typescript 2.4. In Angular 5, several changes have been made to reduce the package size. Google also made many changes to the compiler which helped to increase the speed of both initial and incremental compilation.

Some important features of this version are as follows:

  • Changes in I18n (Internationalization) Pipes: Due to various bugs and browser irregularities, the Angular team had to change the i18n pipes (date, number, currency, percent). Now, you have to utilize the examples given by the CLDR (Common Locale Data Repository) rather than the ones in the international API. If you want to use the old pipes in an application, you have to import the DeprecatedI18NPipesModule Module.
  • Allows for multiple export aliases in a Component: This change enables clients to indicate different names for your components and directives while exporting. By using different names, a user can migrate without any changes while exporting a component.
  • Use httpClient instead of HTTP module: HttpClientModule was created, which is a total revamp of the HttpModule. In previous versions of Angular, we used HTTP modules for making HTTP requests in an application. The HttpClient API from the  @angular/common/http package is now recommended for use in all applications. The features of the HttpClient API include:
    • Introduce Immutable request/response objects.
    • Add middleware logic into the pipeline by use of Interceptors.
    • Supports  JSON body types and no longer needs to be explicitly parsed.
    • HttpClient supports progress events for both request upload and response download.

Angular Http Module

  •  Faster rendering in Angular 5: Angular 5 sidesteps the Zone's addEventListener if present and always uses the native addEventHandler for faster rendering. It is about 3 time faster. Angular 5 uses StaticInjector, which does not depend on Reflect polyfill, instead of ReflectiveInjector. It supports lazy-loading an Angular module into an Angular application.
  • Build Improvements: In Angular 5, the build optimizer removes unnecessary code from your application that is not required during runtime via tree-shaking. This action improves application speed and decreases the bundle size of your application. Using lazy loading with an Angular module helps to avoid long load times.
  • Compiler Improvements: The combination of the on-by-default AOT compiler and integration with the most recent version of Webpack, output in highly optimized builds take less time to deploy. The AOT compiler only emits changed files for incremental compilation. Some compiler performance improvements are:
    • Does not emit summaries for JIT by default.

    • Only type checks input files while using Bazel.

    • Only uses Tsickle if needed.

    • Speeds up loading of summaries for Bazel.

    • Speeds up watch mode.

  • Addition in Animation: In Angular 5, for improved performance, the size of the bundle is reduced by removing AST classes. It introduces two new transition aliases :increment and :decrement. It will also report errors when invalid CSS properties are detected. It allow the @.disabled property to work without an expression. It also supports negative query limit values.
  • Improved form validation: Some new features are loaded in Form validation. The  updatedOn blur option and updatedOn submit option are added to Formcontrols by using the validity and the value of a field or form and are updated instead of every input event. Google has also introduced updateOn support to ngModelOptions that improves its performance by delaying form control updates until the "blur" or "submit" event in Angular 5.
  • New Router Lifecycle Events: In Angular 5, you can track the cycle of the router from the start of running activity through to completion of activation by using newly added lifecycle events. Here are some events:

    GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationStart,

    ActivationEnd, ChildActivationStart, and ChildActivationEnd. 

  • Excellent Mobile Experience: In Angular 5, the @angular/service-worker package is introduced, which plays an important role in making progressive Web Apps. Progressive Web Apps are all about conveying user experiences for mobile devices that are stable, rapid, and fascinating.


Well, in Angular 5 there are many features that are included for better improvements. It is lighter, speedier, and simpler to use than previous versions. Of course, Angular 6 is going to launch soon, but in the meantime, the Angular 5 team did a remarkable job.

angular, angular 5, ui design, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}