ere is what our team have been talking about for a while. In January 2022, AngularJS is officially dead. The team published information about the end of the Long Term Support (LTS) period in their blog. In a succinct post addressed to the AngularJS community and Angular developers, Mark Thompson shared further information about the fate of the outdated front-end framework. The Developer Advocate on the Angular Team thanked everyone for their loyalty to the technology and made a transparent hint about the urgency of the AngularJS to Angular migration plan.

The Frontend Company foresaw such an outcome, so we created our series of posts about migration from Angular 1 to Angular 2+. Today we'll share a plan on how you can make the switch and a few helpful development tips. 

Important: This will not be a detailed guide on how to migrate AngularJS to Angular. We'll publish more info describing the processes in one of our next blog posts. We advise you to follow the updates of our blog and announcements of publications in the official Facebook group.

Extend your team with niche-experienced developers today!

Book the call with our Managing Partner

book the call

Why should you prepare an AngularJS to Angular migration plan?

Even leaving aside the seven reasons to migrate from a JavaScript-based framework to TypeScript-based technology, you have at least one more ground to do so. Having a clear AngularJS to Angular migration plan will significantly speed up upgrading to a new platform, creating a hybrid web application, or making a parallel migration.

Regardless of the chosen way of migration, you cannot do without a comprehensive development roadmap. It is up to you to decide based on real-life examples that we share below.

Case in point #1

Dave holds the position of CTO (Chief Technology Officer). He was tasked with creating a hybrid application to make Dave's company web product run faster and more effectively. It took the CTO a little over three weeks to prepare for the process, as well as the help of another team member. Dave took on a Senior Developer as an assistant, who spent a little over 1,5 more weeks preparing the project to move to TypeScript (TS). Add to that some more time for migration. It's an incredible drawback for the coding team.

At the time the experts were going through all the preparatory processes, they didn't have any decent examples or awareness of the importance of the plan. The team ended up spending almost two months on the initial stages of programming. If the crew had worked out an AngularJS to Angular migration plan in advance, discussed it, and acted on the chosen protocol, it would have taken them no more than 2-3 weeks to do everything.

Note: Large AngularJS-based apps often take longer to migrate than others. You have to understand that the time commitment will be more for the upgrade of a complex algorithm. Furthermore, niche or specific web applications also require more effort. This case in point describes the general situation.

Read more:

Is AngularJS dead? The most asked question of recent times

Case in point #2

Martin is a Team Lead at a small company. He was tasked with rebuilding an old app for the automotive industry into a new one based on TS source code. The first thing Martin did was work out a strategy for how to proceed. He brainstormed a step-by-step migration plan with his crew, what tools they would need for the switch and an estimate of the rough working time.

Given all the necessary tasks, the specialist spent 2,5 weeks on the initial stages of preparation and programming. After that, the team finalized the strategy in a few more days. Not a single hour was spent in vain because the devs followed a straightforward algorithm of actions.

Martin's main advice is as follows: «Divide all the processes of migrating from Angular 1 to Angular 2 into steps. In doing so, perform them sequentially, not moving to a new step until you are sure of the effectiveness of the previous one. It's easier to fix small inaccuracies or bugs early on than to redo the work from scratch. If you don't have enough experience or few in-house specialists, you can hire an Angular developer». 

What should an AngularJS to Angular migration plan include?

The secret to a successful project has some pieces. For this reason, your AngularJS to Angular migration plan should have specific components to succeed. 

If you want to prosper with your technology migration, you should include the following in your plan:

1. Preparation for migration: Do not ignore the phase of preparation because it directly affects the speed of further work. The better you prepare, the easier it will be in the future to migrate.
2. Selection of tools and packages: The best thing for the team is to pick a list of tools that they will 100% use in their tasks. And additionally, choose toolkits that the crew can apply in case of problems with the core toolset. There are cases when well-known and widely used tools don't fit your particular project. Then you urgently need to look for a replacement.
3. Role assignment within the team: It is crucial to appoint the person responsible for this or that stage of the work. You or your CTO should assign who will implement the new features and who should migrate the old web app functionality.
4. Choosing steps to migrate from legacy to updated technology: Be sure to make your plan and highlight the most critical points in it. Be careful to write down the sub-steps for some moves and mark the possible complex tasks with an asterisk. It will be a signal to the other coders that a particular job may have complexities, some recommendations, and is not suitable for one-size-fits-all solutions.
5. Consider additional actions and further steps: By this, The Frontend Company team means extra features planned to be added to the web app soon. You won't be able to implement everything into your project at once. So in the first stages, the Angular-based product will be something like an MVP. You need to discuss with your team beforehand what functions are essential to implement and what can be waited on for the time being.

Note: Your goal when thinking about an AngularJS to Angular migration plan is to minimize the development time of a hybrid web application. Why? The longer a project is in a hybrid mode, the more difficult it becomes to maintain. Two code bases result in users getting extra megabytes of JS-based code. It negatively affects the loading speed. In addition, coders have to deal with two frameworks at once while still releasing updates and maintaining the web service.

Read more:

7 Reasons For Angularjs To Angular Migration

Here's how a good AngularJS to Angular migration plan looks like

Our Angular development team has put together an example of what a well-thought-out plan should look like. Of course, some steps can be both added and removed. This roadmap is modified depending on the number of Angular technology (2, 3, 4, etc.) and specific business needs. Mostly, your outline will look like the one you see below.

An example of a proper AngularJS to Angular migration plan

The preparation stage

At this point, the team should prepare to migrate code written in JS to TS with the allowJs compiler option. It is also helpful to use the latest changes in JavaScript styles to not rewrite parts of the source code. Another thing you should include in this stage is a sub-item with the $scope exception, which is no longer used in new versions of the framework. 

If you had a web project on Angular 1.5+ versions, it is also worth including the API component at this phase. Its main task is to help coders migrate to later versions of the TS-based framework.

Read more:

How to prepare for the migration AngularJS to Angular properly?

A selection of tools and libraries

One of the indispensable helpers during the migration of an AngularJS-based project is the ngUpgrade library. Its task is to help programmers mix source codes written in JavaScript and TypeScript. What will you use most often at this point? Most likely, you cannot do without the UpgradeModule. The tools presented in the module let the two frameworks coexist seamlessly at the same time. The size of your web application doesn't really matter. ngUpgrade is suitable for small and large projects.

You will also need to include Webpack, Gulp, Angular CLI, Template loader, AoT compiler, UI router. We will talk more about the purpose and tasks of these tools in one of the following articles, dealing directly with migration from Angular 1 to Angular 2+. Besides the tools mentioned above, you may also need Kendo UI, Gridster 2, ESLint, RxJS, Angulartics, and Visual Studio Code.

Important: In the preparation phase, you will need to get the JS code ready for TS. In this case, our team most often uses @types/angular. Better not forget to add it to the list. It is the same package that contains the allowJs compiler option we mentioned above.

Assigning roles within the crew

We are not going to detail this step for two reasons. First, we don't know how tasks will be shared within your development team. Second, if you are planning to outsource your development team, you don't need to think through this phase independently. The only advice from our team leads is to keep a clear division of roles within the team. Do not assign tasks to specialists in a chaotic manner. Otherwise, you will not be able to find the person responsible for this or that amount of work.

What points should be in the AngularJS to Angular migration plan

• Development of your web app using Angular CLI, Webpack, or Gulp. The final option is chosen based on the functionality of the web project and the experience of the coding team.
• Configuration of the template loader. At this stage of the process, you will need to download HTML files separately for the JS- and TS-based framework.
• Selection and use of a transcompiler that will help smoothly convert one programming language (JavaScript) to another (TypeScript)*. The Frontend Company team recommends running the TypeScript compiler. The main reason is that it supports the AoT compiler. We didn't suggest adding it to your list of tools for nothing. You can utilize it to enhance the rendering and size of your web application. Although, if it does not matter for your project, you can use Babel.

*At this phase, you also need to prepare your transcompiler to work with Angular. For this purpose, you should turn on two functions in the TypeScript compiler. They are experimentalDecorators and emitDecoratorMetadata. 

• Set up browser support to improve the UX. Recommendations from the creators are used for this goal. Some browsers may have different polyfill configuration features, which should be kept in mind.
• Bootstrapping a hybrid web application*.

*If a web project is built from scratch, then instead of bootstrapping, the development team will only have to disconnect the old web service from the network

• Adjustment of routing. Since our team works with ngUpgrade, our experts strongly recommend using a mechanism from this library. It's much easier than running other tools for this kind of thing*.

*For some projects, our programmers are also comfortable using hybrid routers. In particular, we like this one. You will need to adjust it further, but there are no complications in the setup process.

Note: A more detailed description of the AngularJS to Angular migration plan specifically for the transition steps, you will find in the very next article of our blog.

Read more:

AngularJS vs Angular performance comparison

Additional things to think about as well

It can include a variety of actions that are necessary for the final switch to the new platform. Long story short, by this stage, you should already have permanently disabled AngularJS and got rid of unnecessary parts of obsolete source code. Then it will be easy to disable the AngularJS-based project and keep the new, better, and more productive web product working.

Other than gradually rewriting parts of the code and switching to TypeScript. You can't maintain a hybrid web app for the rest of your days; at some point, it will become a full-fledged Angular-based project. The Frontend Company team advises speeding up this transition by introducing new features to an Angular-based service or application. Then you won't have to do the same job multiple times.

Besides, it will be necessary to take care of the testing of the updated project and styling. In some web apps, styles are not part of the code components, so this item will have to be worked through separately. Also, despite how excellent the plan is and how well coordinated the team worked, you cannot forget about performance issues. 

At the end of the AngularJS to Angular migration plan must collect feedback from users and get information about the UI/UX. This way, the team can make the web project more appealing to the target audience (TA) and fix what customers don't like in the early stages.

A brief conclusion on migration and upgrade

This article is not a full-blown tutorial for coders. With it, we want to show how complicated migration from an outdated framework to a new one is. It's also a tip for business owners who wish to make the best switch of their web applications to the latest technology.

Our example of the AngularJS to Angular migration plan can hint at how good a programming team you want to hire. It is enough to check some points, tools, and ask in detail why the developer has chosen this path. There is no single proper roadmap for this process. However, a pro will readily tell you why he acts one way or another.

Do you want to migrate as soon as possible? Book a call with our Managing Partner or contact us in one of the handy manners. Other contacts are listed at the bottom of our website.