head of the uproar over the end of the Long Term Support (LTS) period for the Angular.js framework, our team started a series of articles about migration. The Frontend Company team had been mentioning for a long time that Angular 1 was dead, and it was just a matter of time before Google stopped supporting it. So it happened. Still, this is no reason to get down or get into a panic. Although your web project is based on JavaScript (JS) code, you have enough time to upgrade from AngularJS to Angular.

Today, our development crew wants to tell you more about the most widespread ways to switch to the TypeScript-based framework. In this article, we'll talk more about the five possible ways to switch platforms. If you've read some of our other publications, you were probably stunned.

True, we mentioned just two options to upgrade previously. Alex and other of our Angular programmers referred to building a hybrid app and a parallel migration. Yes, we're not backing down. These are really the most typical ways to migrate from a legacy to a current platform. However, you do not have only one path to make it happen. Next, we will go into more detail about it all.

Extend your team with niche-experienced developers today!

Book the call with our Managing Partner

book the call

What are the possible ways to upgrade from AngularJS to Angular?

Every company and developer has their preferred approaches to upgrade from AngularJS to Angular. There is no exaggeration; a coder can use several suitable solutions at once to solve an issue. It's just a question of how well they fit a particular web application. The Frontend Company team also has its favourite approaches for migrating AngularJS-based products to the Angular platform. So, it's worth taking a closer look at each of them.

Way #1. The ngUpgrde library

For starters, we want to talk about the most common and comprehensive approach to switching, which is using ngUpgrade. This library does an excellent job of updating both small and large-scale apps. Primarily, with the help of solutions available in the library, coders can combine or mix components of two frameworks at once.

Besides, the apps will stay accessible to users and interact perfectly with each other. The programming team will not have to migrate with 2x efforts or involve more people as initially envisioned. Specialists are perfectly capable of gradually adjusting the migration and can update parts of the source code step by step.

Utilizing ngUpgrade makes the transition a little smarter. Even if you don't gain in time, you'll be able to allocate your budget more wisely. The pieces of code will generally coexist in the switching process.

Why does our crew favor ngUpgrade?

1. Here you have the UpgradeModule tool, inside which bootstrap and hybrid project management solutions are already preinstalled. It means this module supports code for two technologies simultaneously.
2. By using the library, you have access to two frameworks at the same time. That is, programmers have doors open to AngularJS and Angular-based source code. It won't be an emulation so that you can optimize just the necessary parts of the code.
3. Work on the web project is conducted in three levels, which should be focused on the most. These are DOM, dependency injection, and change detection.

• Hybrid apps utilizing ngUpgrade contain directives and components for the two front-end frameworks. Either dependency injection or input and output bindings are used to optimize their interaction. The challenge is that each DOM element only applies to one technology; the opposite platforms «don't see» each other's elements. To bridge frameworks, you can use content projection from one technology to another (content transfer) or a component from a different framework. We like the last option less.

• Despite a few key differences in dependency injection between Angular 1 and 2, devs will still be able to build compatibility. To accomplish this, they should use @angular/upgrade/static. For everything to work smoothly, coders should either downgrade the service level for Angular technology, thus making them available for Angular.js. Or programmers can update the services of the JavaScript-based framework to the injection for TypeScript-based technology.

• Angular.js and the second version of the framework do change detection differently. While the JS-based front-end technology uses scope.$apply() for this, the one based on TypeScript (TS) does not. In Angular 2+, the source code runs in the so-called Angular zone. Therefore, the framework always knows when to detect changes or when the source code ends. In hybrid projects, using the UpgradeModule tool, coders can combine the approaches of the two technologies.

Note: If you use the UpgradeModule tool, you will not have any problems with routing. However, if you run downgradeModule for some reason, don't forget to write a parameter of type UIRouter. You won't have bootstrapping states if you don't do so in the constructor. You can't say that we approach development this way. Some colleagues, nevertheless, go this way to upgrade from AngularJS to Angular for large apps. In rare cases for those large applications, UpgradeModule can lead to performance issues.

Way #2. Upgrade from AngularJS to Angular via parallel migration 

Since we often mention this method in our blog posts, it is pretty obvious that we favor this particular solution. The Frontend Company team utilizes the parallel migration method to upgrade from AngularJS to Angular in several cases:

• a web app is small, and it's possible to make the source code from scratch in a short time;
• a client wants to avoid possible difficulties in compiling the code of the two technologies and has the required budget to support the AngularJS- and Angular-based project;
• a company would like to bring in many additional features at once that are not in the JS code and do not make sense to implement in Angular 1.

Why does our crew like parallel migration?

1. Our experts can independently think through the architecture of the application and improve those moments that were incorrectly implemented in Angular.js. In the 2010s, firms did not care much about the structure and correctness of the source code, which later became one of the most frequent worries of companies to upgrade from AngularJS to Angular. Building code from scratch is the most cost-effective and convenient for such web products.
2. In a new app, it's easier to get rid of some old bugs. That is, when we rewrite the code, we close the bottlenecks and remove crutches from the source code. In the end, all we have to do is disconnect the legacy web app from the network, and the new one will function flawlessly.

Note: Such a method is not always suitable. Building large apps from scratch will require lots of effort and a hefty budget. Moreover, as long as programmers write the new code in Angular 2, someone will still have to maintain the functionality of the JavaScript-based application. You cannot do without expert advice before deciding on such a way to upgrade from AngularJS to Angular. Book a call with us or consult the experts by emailing info@ava.codes.

Read more:

Why are companies worried about the migration from AngularJS to Angular?

Way #3. Using the Angular Elements package

The package @angular/elements became available to coders a couple of years ago. That's what our team recommends when you don't want to use ngUpgrade features. We have nothing against this way of migrating from Angular.js to Angular 2+, but we don't use it that often. For a number of reasons.

Why does The Frontend Company team favor @angular/elements?

Because in this package, TypeScript-based technology components are packaged as custom elements. In this way, you can find the HTML elements and convert them to custom ones. With polyfills, programmers can customize the web applications not only for supported package browsers (Safari, Google Chrome, Opera, Edge based on Chromium, Firefox) but also for other kinds of browsers.

The Angular Elements are perfect for the largest web projects with a complex architecture and concept. In small or relatively simple web products, using @angular/elements is not appropriate. This is why it's not our favorite way to upgrade from AngularJS to Angular.

Way #4. Vertical and horizontal slicing

In fact, it's not one, but two and completely separate options for the upgrade. Programmers refer to them as varieties of methods for building a hybrid web application. The Frontend Company team finds these solutions simple and effective at the same time. 

Why does our team favor vertical slicing?

The vertical slicing approach utilizes modules to upgrade from AngularJS to Angular. It makes this way perfect for large projects where you need to constantly test and debug the written code. In this way, the technology components will not mix because they include parts of solely AngularJS- or Angular-based code. 

Here's what it looks like in the form of a simplified scheme:

Note: Components often have to be duplicated. Here, everything depends exclusively on the versions of front-end frameworks used. In addition, during the upgrade from AngularJS to Angular, specialists will have to spend more time migrating the route.

Why does our team like horizontal slicing?

The horizontal slicing method focuses on those components most frequently used in frameworks. After «figuring out» such components, coders start rewriting them. That is, developers first find building block components and later identify the components, which utilize these low-level parts. With this approach, the main thing is not to forget one thing: both versions of the code must be added to the module for it to work smoothly. If not, there will be no problem.

If you imagine it schematically, the upgrade from AngularJS to Angular would look like below:

Note: The fragment upgrade from AngularJS to Angular allows to relatively quickly belt all the components of a web application by migrating them to the actual platform. With all the advantages of this method, you will need much effort to migrate/update all the components.

Way #5. Source code compiler

Last but not least, is the method of migrating web apps using code transcompilation. In our previous article on how to migrate, we already mentioned this option a bit. We decided to put it this way at the end, since not all members of our The Frontend Company team are favorable to it. 

While some see such solutions as cool time-savers, others find such things flawed. In reality, source code conversion may not go as well as it sounds like in theory. Nevertheless, some members of our crew have had positive experiences with S2S compilers. Here's why we can't bypass it.

Why do a few members of our team like transcompilers?

1. Sometimes it allows you to upgrade from AngularJS to Angular faster.
2. No need to rewrite portions of the code.
3. There is already a template to work with the S2S compiler.

You can use such method to upgrade from AngularJS to Angular by running the standard TypeScript transcompiler. Here, you just need to enable the experimentalDecorators and emitDecoratorMetadata functions. Likewise, you can also use the JavaScript Babel compiler to achieve a good score.

Note: In many situations, you will still have to double-check the correctness of the converted source code. If the application is complex and large, you will not save time. So, before applying this approach, we recommend that you think through all the possible difficulties first and understand whether compilation is justified. Maybe in your case, the best way to upgrade from AngularJS to Angular is to rewrite parts of the code.

Are you still in doubt about which migration option is right for you? Then you can entrust the migration process to our team or ask the Sales Department for a consultation first. Our Managing Partner Viktoria will always be glad to answer your questions, help with the project evaluation and assist with the choice of the dream development team for the upgrade from AngularJS to Angular. Book a call or email info@thefrontendcompany.com