Migration from AngularJS to Angular

Worried about the nearing EOL(End of Life) of AngularJS?

AngularJS has already entered its Long Term Support (LTS) period, on July 1, 2018, which was expected to end in June 2021. However, before the companies could migrate from AngularJS to Angular, the pandemic arrived and disturbed all the arrangements. In light of the fact, AngularJS has extended the EOL for 6 more months i.e. till December 31, 2021,  after which AngularJS will not be providing support to the framework. It’s time to brace yourself for the change and upgrade from AngularJS to Angular.

To make sure that migration does not end up in a disaster, the migration should be done in stages. To start with, choose the type of migration as per the requirement and make the necessary preparations before the up-gradation process starts.  Evaluate the business case, that is the time and effort to complete the up-gradation. Once the business case is evaluated, prepare, and align the existing AngularJS application with Angular. The best thing about this preparation is that it not only prepares your application for the up-gradation process but also improves the code structure of the existing applications.

Stage-1: Choose the Type of Migration Based on Your Requirement

There are 2 types of migration based on your existing application –

1. 1. Migration From the Scratch

   If you want to revamp your application completely, migration from scratch could be a better option. In this approach, you can re-engineer your application, starting from designing to the functionality. But, before you start with the migration, evaluate the resources required such as time, money, and human resource. Generally, this type of migration is more feasible for a small size application in comparison to the larger one.

2. 2. Hybrid Approach

   Hybrid Approach is preferable when you want to migrate your application in an incremental way. In this approach, the new code lives with the old until the migration process is completed, requiring you to take care of the framework and maintenance.

   The AngularJS/Angular-hybrid module empowers you to run and maintain the operations of two different frameworks simultaneously in one project. The new features are implemented in the new framework, and the old features are being transferred steadily, without affecting the application performance as a whole.

Stage-2: Preparation

Once you have decided the migration type, start preparing your application for the migration-

1. 1. Set up TypeScript.

   It is not mandatory to use TypeScript in Angular, it works well with JavaScript and Dart. If you plan to use TypeScript in your upgraded application, it is recommended to bring in the TypeScript compiler before you start the up-gradation process. You can use the TypeScript features in Angular JS as well, this way you will be TypeScript ready.

   Being a superset of ECMAScript 2015, switching to TypeScript only requires you to do the following preparations-

   • Install the TypeScript compiler.
   • Rename files from *.js to *.ts.
   • TypeScript imports/ exports can be used in the applications using module loaders, to arrange the code into modules.
   • Type annotations should be added to the existing functions and variables.
   • The JavaScript features that are new to ES2015, should also be gradually added to make the code more comprehensible and functional.
   • You can convert the services and controllers into classes.

2. 2. Abide by AngularJS Style Guide for the Code Structure

   Angular is an upgraded version of AngularJS, hence their goals are the same, empowering you to follow the same AngularJS Style Guide for your Angular app as well. AngularJS Style Guide helps you to create cleaner, as well as highly maintainable  AngularJS applications, which is also more closely Angular aligned.

   Following rules can make the up-gradation much easier-

   • One Component per File
   • Folders-by-Feature Structure and Modularity

   These rules make it easier to navigate, find as well as migrate the component/ modules in a cleaner and easier way. Hence, it is the most recommended part of the preparation.

3. 3. Using a Module Loader

   Before you break down the application code as per the rules of the AngularJS style guide, make sure you have a module loader. Though breaking down the code into modules/ component files makes the code more manageable, loading all these files to the HTML page with script tags and that too in a specific order is a bit challenging task. Module Loader helps you with this, maintaining and loading the code in the correct order.

4. 4. Using Component Directive

   To build the UI of an Angular application, you need components. For AngularJS, this can be done through component directives. In both cases the templates, controllers as well as the I/O bindings are defined by their respective frameworks, making it easier to migrate.

   To make the component directives compatible with  Angular, make sure you configure these attributes to the directives:

   • restrict: ‘E’.
   • scope: {}
   • bindToController: {}.
   • controller and controllerAs.
   • template or templateUrl.
   • transclude: true/{}
   • require

   Do not use the attributes like compile, replace, priority as well as terminal as these are not supported by Angular

Stage-3: Migration to Angular

If you are writing your application from scratch to upgrade it to angular then the process is comparatively easier than that in the case of a hybrid approach. In this approach, you need to manage both the code simultaneously during the migration process. Angular provides a very useful library for the same called the ngUpgrade library.

It empowers you to mix and match components of both Angular JS and Angular in the application. Also with the help of the ngUpgrade library, these components can interoperate with each other seamlessly making the migration super smooth and easier.

The ngUpgrade library provides you with a very powerful tool called the UpgradeModule that helps you throughout the migration process. This module consists of the utilities for bootstrapping as well as managing hybrid applications, thereby supporting both Angular and AngularJS code.

ngUpgrade library empowers you to execute the code simultaneously enabling the services and components of one framework to interoperate with the services and components managed by the other framework. This takes place in three major areas-

1. 1. Dependency Injection

   Both Angular and AngularJS function a bit differently in various aspects and this holds for dependency injection as well. AngularJS always has only one dependency injection which is always of String type. On the other hand, Angular has a hierarchy of dependency injection which can vary in its type. Despite the differences upgrade/static makes them work seamlessly together in 2 ways-

   • Upgrade the Angular JS services to avail them for injection to Angular code.
   • Downgrade the Angular service for injection to Angular JS code.

2. 2. The DOM

   The DOM of a hybrid application consists of the components and directives of both Angular and AngularJS. The point to consider here is that among all the available elements i.e. components and directives present in the DOM, a framework only treats the elements that are owned by them, else it ignores it.

   In the case of upgrading the AngularJS application to Angular, the hybrid application starts as the AngularJS application. Whenever an Angular component is encountered in the AngularJS template, Angular takes control and manages it.

   To interleave the frameworks, you can cross the boundary either by using the other framework components or by projecting or transcluding the contents from the other framework.

3. 3. Change Detection

   In Angular JS the change detection and data binding updates are done by the function called scope.$apply(). Whenever an event occurs this function is called either by the framework itself or manually by you after which the updates are made.

   Angular takes it differently, executing the code in the angular zone. As soon as the code finishes, Angular automatically detects changes and makes the update. Unlike AngularJS you need not call any functions like scope.$apply(). If the function is already present in the code, no need to remove it, it won’t affect the code anyways.

Steps of Migration-

1. 1. Switch to Typescript
   2. Install the Angular and ngUpgrade Library
   3. Import UpgradeModule in the NgModule for bootstrapping
   4. Bootstrap the hybrid (AngularJS and Angular) application, for which you need to bootstrap each part of the application be it Angular or AngularJS.

Note: In the hybrid application, bootstrapping has to be done manually with the UpgradeModule unlike the pure AngularJS applications, in which bootstrapping can be done automatically just by adding an ng-app directive in the HTML page. Hence, it is advised that before you switch your application to hybrid mode, switch it to AngularJS, so that you can use the angular.bootstrap method for bootstrapping.

As we have discussed, there are two ways in which you can carry the migration process- Upgrade and Downgrade. We will consider both ways in the steps ahead.

1. 1. Upgrade your Code

Upgrade– Now that you are running a hybrid app, start upgrading your code. If you want you can upgrade the AngularJS component directives and access it from the Angular code.

Downgrade-  Use the Angular component into the AngularJS code. For this, you can downgrade the component by using downgradeComponent() method. You can rewrite the AngularJS components into the Angular components or you can also add a new Angular component as well.

1. 1. Project/ Transclude

Upgrade-  If you want to upgrade the AngularJS component, you can transclude the Angular content in it, by marking the transclusion point through the ng-transclude directive.

Downgrade: In case you are downgrading the Angular component, to transclude the AngularJS content into the Angular component, you can use the feature called content projection instead of transclusion feature. To make the component support the content projection, use the tag in it.

1. 1. Inject the Dependencies

Upgrade- To include some essential logic, which you cannot change, you need to inject it in your code. To make the AngularJS dependencies injectable into Angular, you can request for the service from AngularJS $injector.

Downgrade- To inject the Angular code into the AngularJS, you can downgrade the Angular dependencies and use them from AngularJS. For this, you need to import the ‘downgradeInjectable’ function from ‘upgrade/static’.

Gradually, you will be able to upgrade your AngularJS application to Angular. Once you’ve upgraded all the AngularJS application components with the Angular ones, make sure you also upgrade the routing process as well by adding the Angular router. And lastly, the testing process, test your final Angular application for its performance and accuracy.

Conclusion

Angular authors have never failed to astound the development community by releasing back to back extremely advanced Angular versions. Currently, it’s on its version 9, released on February 6, 2020, which has come up with some novel features like Ivy compilation and updated typescript versions. Along with this, it has also released the beta version of Angular 10 in the same year i.e. on the 24th of June, 2020.

Though it is progressing by releasing the upgraded versions, it is also ending support for the old and outdated versions like AngularJs. If you are still using AngularJs application, so, it’s time for you to upgrade your application to Angular before it’s too late.

Despite being a detailed, complicated, and time-taking process, the importance of up-gradation can never be overlooked. If you want to match the pace with the advancing customer needs, you have no choice, but to be up-to-date at your end. However, if the process seems strenuous to you, reach out to the experts. Hire an Angular Developer, and leave the hassle to us.