Angular 2 upgrade options

Angular 2 has finally reached beta. Meaning that people can now start looking at using it more seriously. As was announced on the Angular blog the team has already worked with some internal Google teams to start using angular 2 in their project.

Looks like it might be time to start using it.

The biggest question for most will be how to start using angular 2 today. As I see it today, there are 3 choices:

Clean start

Rewrite everything again using angular 2 as your core.

The problem with this is that its a huge overhead if you already have a fairly large and complex system in place. I'm sure most developers would love to get rid of their old clunky codebase and start again, but this could require a lot or work and planning.

The advantage: A new shiny codebase to start from without all the older weirdness that might have been introduced along the way.

The disadvantage: A lot of work might be needed to rewrite everything. Not just in code, but in tooling, testing and time needed to learn any oddities that angular 2 might have.

There are however some other less drastic options available as discussed below.

ngUpgrade

This is one solution that sounded great to me for larger project. Using ngUpgrade allows us to start mixing existing codebase in angular 1 with the newer angular 2 modules. This tie in module helps bridge the gap between the 2 core frameworks.

My initial impression was that this was the perfect solution. Slowly rewrite modules in new angular 2 syntax and eventually you'll have a new shiny app in angular 2.

The advantage: You don't need to start your whole app from scratch and encounter all the same bugs you originally had from the beginning.

The disadvantage: You have to have both angular 1 and angular 2 core loaded in with your app. For some companies and apps, this might be too much overhead. In my case, we use webviews in our mobile app for some more complex views. This would make the load times for mobile much slower and probably something we aren't going to want to do right now.

ngForward

This is the last solution I have seen so far. It seems that ngForward is still actively under a lot of active development. The key difference between this and ngUpgrade is that you continue to write your apps using angular 1 core, but ngForward provides some syntactic sugar to make your angular 1 code look a lot more angular 2 like.

The advantage: you can slowly rewrite your app using angular 2 like syntax, meaning you can upgrade to angular 2 later with much less work.

The disadvantage: currently it seems that ngForward is written for apps willing to make the switch to ES2015/Typescript. The last update I saw was stating that support for ES5 syntax is still in progress.

Conclusion

Angular 2 looks great. It has some great ideas and encourages a more modular component based app architecture. Although its still early days, the announcement of it's beta release indicates that their API's shouldn't be changing too much in the near future.

As for me, it looks like I might have to wait a bit to upgrade to angular 2, most probably through the ngForward route since it will take some time to train the team in the newer syntax and modular approach.

Stephen Pitchford

Frontend web developer. Lover of AngularJS and all things web.

Subscribe!