The journey to Angular2 from Angular1 – Austin – Medium
- You probably want to upgrade your code to TypeScript ( but don’t have to )
- Maintain all your existing tests for current code while building new ones for the new code ( BTW protractor does work in hybrid )
- I’m going to run over a few of the points we discussed along with some code.
- I believe there is 4 different approaches to get to Oregon, I mean Angular2.
- Only have to write new tests for new features
This story starts in the year 2012 where I started writing my first Angular1 app. It started off great, amazing 2-way binding forms with a strong love-hate relationship with $scope. When Angular2 was…
When Angular2 was born last year, Angular1 quickly became the red-headed step child (sorry red heads). The more I used it the more I was in love. At work, we really try to stay on top of latest tech stacks, it can be painful sometimes but if you don’t the code will deprecate pretty quickly and next thing you know there is no upgrade path. We also had that awkward React + Angular1 mix for some of the data viz we do that you really need some sort of on-push change detection for rendering SVGs.
I had this dilemma; I had 50k LOC of Angular1 in my work app. I’m very fortunate that my company embraces new technology but a total re-write was gonna be a tough sell to even the most adventurous businesses.
I asked my Twitter audience ( you should totally follow me if you don’t ) and I was a little shocked with the results:
When I was a kid, I played The Oregon Trail avidly and that’s how I kinda felt, 2,000 miles between me and Angular2. So thus the problem, how do I get from Angular1 to Angular2? Before I get started, I’m also a host on AngularAir where we recently had a guest talking about the path to upgrade, its a great show I highly recommend it. I’m going to run over a few of the points we discussed along with some code.
I believe there is 4 different approaches to get to Oregon, I mean Angular2. Lets take a quick look at pros and cons of them and then I’ll share the path I took…
A rewrite is certainty one option to upgrade, its got some great pros like:
That’s a lot of perks but it has some serious considerations you have to be able to swallow:
Large organizations can probably swallow some of that risk and effort with R&D teams but for most of us its a tough sell but don’t fear there are other ways!
by actually creating separate pages. In a incremental approach, any new features being built with medium effort or higher written in Angular2. The advantages are not too shabby either:
but it does have quite a few downsides like:
I’m not too fond of this idea so I’m not going to spend a lot of time on it but it is a option so I feel obligated to mention it. Rather than use Angular2 at all, you could just write your Angular1 code in a way that prepares it for a Angular2 migration sometime in the future. There is a project out there called ng-metadata that even lets you simulate all the same syntax.
The thought process here is I will eventually have all my ng1 code in ng2 format and one day I’ll be able to magically pull the rug out from under it and it just all work in ng2. To be honest, I don’t ever see that happening with all the differences between the 2 frameworks so I’m just going to stop at that.
in the framework that would allow you to run Angular1 and Angular2 in parallel so you could write new Angular while you maintained your legacy code.
The concept is relatively straight forward, its a Angular1 directive that wraps Angular2 components. It transposes the inputs of the directive to the inputs of the Angular2 component. When Angular1 scope digest is triggered, we simply pass those changes onto the Angular2 component [reference]. It’s not even a new concept, we’ve seen this done with React and various other frameworks to interop with Angular1.
Sounds like a magic bullet right? Not so fast…but before we get into the gotchas, it does have some perks:
the downsides at first glance aren’t bad:
but then when you a bit deeper, you find a bit more…
What’d you do?!
Naively you don’t think about all that ^^ until you get knee deep in it. I was naive and used ng-upgrade though so here’s what happened next:
But at the end of the day, I did get it working! As proof I created ng1-ng2-webpack-lazy-uirouter project on Github. In the project, I interop Angular1 and Angular2 inside each other and even in nested routes!
We used that boiler plate as the starting ground and have been incrementally updating features as we add new features. We are about 25% or so through it and have had good results so far.
So piece of cake right? Haha, with all that said to be honest in hindsight which approach would I have taken? Probably the same one, once you get over the hump its really not that bad and most people don’t have as fancy setup with lazy-loading as me so it won’t be as tough…but then again if your code isn’t that fancy maybe you should just rewrite?