Differences Between Angular 4 and Angular 5

26548 0

Angular JS was developed in 2009 by Miko Hevery at Brat Tech LLC, as front-end web development application. Based on JavaScript, Angular JS is an open-source framework built on the concept of connecting the software components and creating user interfaces. The framework is currently maintained by Google.

Angular JS was mainly built –

  • To provide a proper architecture to the application, throughout its life cycle, from UI designing to the testing phase.
  • To provide a modular architecture to the application, so that client end and server end of the application can be designed and developed parallelly.

To enable the developers to design DOM (Document Object Model) independent application logic.

The framework gained substantial popularity among web developers. As promised by Google, to make Angular JS more user-friendly and effective, it is updated twice a year. The first version was released in 2009 & in the latest version, Angular 5 was released on 1st Nov 2017. Developers can soon expect Angular 6 and Angular 7 as well. Although Google is committed to providing the backward compatibility for all the new releases.

In this post, we will take a deeper look at the Angular versions released in 2017.

  • Angular 4, in March 2017
  • Angular 5, in November 2017

Angular 4

Apart from being a major release jump from version 2, Angular 4 also had many new features along with changes which were non-compatible with the previous versions. Few of these interesting new features were:

    1. a)   Router ParamMap:  Till Angular 2, key-value object structure was used to store route parameters, which make it accessible only via using standard JavaScript syntax (parameterObjekt[parameter-name’]). From Angular 4, the parameters were made available in the form of a map & can be executed by simple method calls.
    2. b)   Dynamic Components with NgComponentOutlet: *ngComponentOutlet directive enables the web developer to develop dynamic components in a declarative way.


    To ensure that the application package is not heavy due to additional coding, which is not required for the specific application, Animations were put into a separate package of its own, which were earlier part of @angular/core moduled

  1. )   TypeScript 2.1/2.2: Angular 4 improved the Type security of the applications and the speed at which the ngc-Complier executes. This will help to ensure coding faults like defining a variable & telling TypeScript that “null” and “undefined” can be entered as the variable’s value.
  2. e)   HTTP Request Simplified: Adding parameters to the “HTTP” request, to perform a search operation has been simplified.

f) Service: To perform the get or update operations, a new service was introduced, known as “Meta tags”

Angular 5

On the other hand, when Angular 5 was released, it came with a whole bunch of additional and new features, service improvements and bug fixes. Some of these features were actually, a pleasant surprise for the existing Angular users as well. We have listed down a few very interesting features for our readers so that they can easily understand the difference between the two versions.

  1. a)   Build Optimizer: This is a tool which was included in the CLI to help the developers in creating a smaller bundle for the application.  Apart from decreasing the users’ bundle size, the feature also helps in increasing the boot speed of the application for the users.
  2. b)   Compiler Improvements: To enhance faster rebuilds for production and AOT (Ahead of Time) builds, Angular 5 supports incremental compilation.
  3. c) New Router Lifecycle Events: This new feature was added to enable the developers in tracking the cycle of the router, starting from running guards to the completion of activation.
  4. d)   HttpClient: This feature has been recommended for all the application as HTTPClient was highly appreciated. The framework developer is not suggesting anymore, to use the previous @angular/HTTP library. Developers can update the HTTPClient in 3 easy steps:

1. In each module, replace HttpModule with Http Client Module from @angular/common/http.

  1.    Inject the HttpClient service
  2.    remove any map(res =>res.json()) calls, which are no longer needed.

Apart from the above-mentioned features, the version came with a lot of Bug fixes and performance improvements as well. Few of the bug fixes are mentioned in the below table:

Service Description Bug ID
animations always fire inner trigger callbacks even if blocked by parent animations #19753, 5a9ed2d,

closes #19100

ensure animate Child () works with all inner leave animations #19006, #19532, #19693, f42d317
ensure inner :leave animations do not remove node when skipped #19532, #19693, d035175
bazel fix the output directory for the extractor to be genfiles/ instead of bin/ #19716, 405ccc7
common attempt to JSON.parse errors for JSON responses #19773, 04ab9f1
router RouterLinkActive should update its state right after checking the children #19449, 6f2939d, closes #18983
About Payel Bhowmick

The author is an analyst at SpringPeople & writes on emerging technology trends for IT professionals. Passionate about technology, her current area of focus is the digital revolution currently underway in the edu-tech industry. When not at work, Payel splits her time between writing, reading and watching sci-fi movies.

Posts by Payel Bhowmick

Leave a Reply

Your email address will not be published. Required fields are marked *