AngularJS to Angular5 — Upgrading a large application

But how to migrate knowing that the product needs to evolve ? No question of making freeze code for 6 months to re-write everything, so we need a happy medium. The hybrid solution that consists of making the two frameworks live together the transition comes naturally.

I will present the approach we adopted at ContentSquare to make possible this upgrade between the two very different versions/frameworks. However, don’t take this as a strict guideline as your project might be different.

Going to a hybrid state : upgrading without forking

In this post, I will show you why we chose to upgrade incrementally by having a transitional hybrid app with both AngularJS and Angular 5. I will review a basic hybrid configuration.

Pros and cons of going hybrid

Here are the pros and cons that I identified :

  • Promote a “learn and create” spirit — It will motivate your team to learn a complete new way of working
  • Incremental upgrade — the upgrade is incremental, it does not overload the roadmap
  • Many technical advantages and features to expect from Angular 5 — faster change detection, template precompilation and reuse, lower memory usage, observables and so on
  • No legacy code on purpose — Feature additions are no longer made with legacy code (have you ever heard of the phrase, Legacy Code?)
  • Adaptation — Above all, the team must be willing to learn a new language, to change its habits. This point is important and the willingness to migrate must be general.
  • Heavier app — The code becomes necessarily heavier because 2 different frameworks are loaded.

Going hybrid

It is not easy to understand at first glance how the cohabitation between Angular 1 and Angular 5 occurs.

  • TypeScriptAngular is written in TypeScript, this post explain why.
  • SystemJS (or Webpack) — Angular is split in many dependencies (Zone.js, Rxjs, etc). To load them, you will need a module loader and bundler.

npm: load your app dependencies

Upgrading to Angular is a good opportunity to use npm for your front-end dependencies.

TypeScript: compile your app

TypeScript is straightforward to install (npm install typescript -g).

tsc --project main_js_folder

SystemJS: build your app

SystemJS lets you use require() in the browser to resolve your dependencies. It needs to be a bit configured.

Run Angular then bootstrap AngularJS

What is making our current Angular 1 bootstrap’s is the ngApp directive in our body or div element of our main template. We can remove by replacing this :

<div ng-app="MyApp"></div>
<div id="ng-app"></div>

Elaborating an upgrade strategy with ngUpgrade

At this stage, we can think of a migration strategy to ensure that one day, you won’t have any line of code in AngularJS in your app. After all, this is our purpose. Having an hybrid app is not especially a cool thing but it allows us to manage a smooth transition.

What offers ngUpgrade ?

With ngUpgrade we can upgrade an AngularJS dependency or downgrade an Angular 5 dependency.

UI-router to the rescue

Ui-router can do switch logic between Angular 1 and 5 thanks to its module angular-hybrid.

Conclusion

This approach is not displayed nor advised in the official Angular documentation and yet it is this one that seemed for us the most relevant rather than upgrading or downgrading components.

Contentsquare Engineering

Stories from the people building Contentsquare

Pierre Maoui

Written by

Software Engineer @ContentSquare • Javascript • NodeJS • Tech Lover • contentsquare.com

Contentsquare Engineering

Stories from the people building Contentsquare