Stuck? Here’s a Quick Guide on How to Upgrade from AngularJS to Angular

Are you stuck upgrading your AngularJS application to Angular? Evan Harper was too.

Evan, an app developer at a leading IT company, had his app in AngularJS—first developed in 2011—which in just two years attracted a huge number of downloads. The conversion rate was skyrocketing and rewarding him with increased ROI. But only until late 2017.

After seven years of success, Evan felt the need to review the app. He found out that it was time to implement new features. So he decided to move the app from AngularJS to Angular 5—the stable version at the time.

However, migrating from Angular 1.6 to Angular was a challenge.

He had to rely upon some of the built-in tools to ensure efficiency in the process.

“Bird by Bird, Buddy. Just Take It Bird by Bird.” – Anne Lamott

Evan had to take it one piece at a time. He ran the two frameworks in parallel and ported the existing components to Angular one at a time. So he could upgrade the application within a fixed time period.

From JavaScript to TypeScript

Before he could go on to upgrade the application, Evan brought in the TypeScript compiler.

But, why would he do that?

Well, he actually had a logical reason behind this action.

One, this meant that he would not need to learn the language later. Two, he could use TypeScript features in AngularJS code.

This ensured him some additional benefits:

• He could use TS imports and exports, thus organizing code into modules.
• He reaped benefits like great autocompletion support and build-time error checking.
• He could convert controllers into classes.

The upgrade was then a piece of cake for Evan.

Let’s take a look at the tools he used to upgrade his application from AngularJS to Angular 5, and how these tools made the whole transition a cinch.

ngUpgrade

First of all, he mixed AngularJS and Angular components in the app using ngUpgrade. The ngUpgrade library helps upgrade any application, except small ones. Evan could ensure seamless interoperation of components, especially in three areas – dependency injection, the DOM, and change detection. He was able to carry out the upgrade piecemeal as the two frameworks coexisted during the transformation process.

Dependency Injection

While both AngularJS and Angular have dependency injection as front and center, the two frameworks have a lot of differences when it comes to its functioning.

• In AngularJS, dependency injection tokens are strings. However, in Angular, tokens often are classes and sometimes these can be strings.
• AngularJS has one injector, no matter if it’s a single module app or a multi-module app. On the contrary, Angular has a tree hierarchy of injectors. Each component has a root injector and an additional injector.

Well, that certainly doesn’t imply that the components can’t interoperate.

The UpgradeModule available in the ngUpgrade makes it possible. Evan had sure done his research well!

• He upgraded AngularJS services to make them available for injection to Angular code.
• He also downgraded certain Angular services from the Angular root injector to make them available for injection to AngularJS code.

Components and the DOM

A hybrid ngUpgrade application’s DOM has components and directives from AngularJS as well as Angular. To communicate with each other, these components either use input and output bindings of the frameworks they belong to or shared injected dependencies.

Every DOM element is owned by one of the two frameworks, while the other framework shuns it.

A hybrid application is an AngularJS application at the beginning, and then AngularJS processes the root template, for instance, the index HTML. After that Angular comes into play and an Angular component is used in an AngularJS template. Angular manages the component’s template, which may have any number of Angular components and directives.

These tools helped Evan replace the AngularJS components with their Angular counterparts.

He then proceeded with adding the Angular router and Bootstrap.

Angular has a new router, which needs space in the UI to show routed views.

That’s it, and Evan was done with the upgrade. He got his new application up and running.

When Will You Say Goodbye to AngularJS?

Evan put in a lot of effort, and his effort paid off well. He is now earning twice in terms of both downloads and conversions.

When are you going to upgrade your application?

As the adage goes, “You will never be able to start a new chapter in life if you keep re-reading the last chapter.”  

Sticking to the older version is sure to keep you back from the new features and the benefits these bring along with them.

Need Help With The Upgrade? Get in Touch.

Read: 8 Proven Reasons You Need Angular for Your Next Development Project