As I’ve been interviewing for a new contract, the question, “How do we Upgrade to Angular from …?” has come up several times. And as I’ve thought about the question, several patterns have emerged.
From a Portal
The first time I was asked this question, the team I was talking with had an existing Web 1.0 site setup using WebSphere Portal. Not something that you can easily plug any Single Page Application (SPA) into. But all is not lost.
One of the easiest ways to solve the problem is to create a reverse proxy. One popular tool for this is mod_proxy for the Apache server. If you are using IIS, you could use URL Rewrite rules to setup a reverse proxy.
In either case, you will need to setup rules that ensure that anyone trying to access a URL that is still on the old portal site would still be able to access that directly. Once that is in place, you would create one page, or maybe a set of related pages, at a time and stand them up on another server. Then you would change your rules so that anyone trying to access the old URLs that are no longer being served by the old site get redirected to the new SPA application.
Now, this sounds pretty simple. But, I imagine keeping everything in sync as you go might be more of a pain that you might imagine. If you have pages that link to each other, you’ll need to convert links to routes as you go. Say you convert page one. It still has links to the old site. Not a big problem. But as the pages it is linking to now become part of the SPA, you’ll want to convert those links to route directives. One way you might mitigate this issue is to convert pages with the fewest links out first. It might help to create a graph, or at least a spreadsheet, to help you manage the interdependent relationships.
And added advantage of this setup is that any pages in the portal that have relatively static content, and any resources, can be cached, or even moved, to the proxy server where they will probably be served up faster than the original portal.
From a Web 1.0 Site
Switching from an existing Web 1.0 site might be a bit easier. Although, using the proxy method there still might be the best choice. Many of the same issues exist. But in the case of an existing Web 1.0 site that doesn’t depend on a portal, you’ll probably have greater control over the server. Again, you are probably running the site on Apache, nginx, or IIS. In all of those cases, you can setup a rule that says, “if you can’t find the URL, load up this page over here instead.” Where “this page over here” is your Angular site you are converting to. You’ll need to implement something like this anyhow for your Angular SPA to work correctly, so this is probably the least amount of extra work to get you where you need to be.
Then, you convert a page or a set of related pages at a time like I described in the Portal implementation.
From Another Framework
Let’s say that you are moving from React, or some other framework to Angular. I know of a company that is doing just this. The wrinkle is, they have no plans on converting their existing pages to Angular. This makes the transition relatively simple. You setup rules on your server, similar to how you would setup a conversion from a Web 1.0 site. “URLs that look like this, go to the old index.html page and URLs that look like that go to the new index.html page.”
Once again, you’ll need to keep track of routes as you change from one to the other. But it is manageable.
Converting AngularJS to Angular
Yes, I know ngUpgrade exist. But, if you don’t need to use it, why would you. ngUpgrade exist so you can embed Angular in AngularJS or AngularJS in Angular. But, it might make more sense to create a new SPA for Angular and have the two sites reference each other similar to how you would do this for a Web 1.0 site or if you were converting from an entirely different framework.
The reason I recommend using the two-site method first is because Angular really is a different framework. There are similarities between AngularJS and Angular. But that is all they are. What if you just pretended they weren’t at all related. That the ngUpdate bridge didn’t exist. Wouldn’t that make life just a bit easier in the long run? I think it would.
What do You Think?
What do you think? Do you have experience converting to Angular from an older technology? What problems did you face? How did you solve them? Let me know in the comments.
Other post in Angular 2
- Angular 2 – First Impressions [Compared to Angular 1] - February 25th, 2016
- Angular 2 Thoughts - October 4th, 2016
- Getting Started with Angular 2 - October 25th, 2016
- Unit Testing an Angular 2 CLI Project - November 22nd, 2016
- Adding Client Side Routing to Angular 2 - November 29th, 2016
- Angular 2 Lazy Loading - December 6th, 2016
- Reasons to use RxJS Today - December 13th, 2016
- Dissecting Angular 2 Modules - December 20th, 2016
- Awesome Angular2 Architecture Options and Opinions - December 27th, 2016
- What if Everything Was Immutable? - January 10th, 2017
- Amazing Angular2 DOM Tips, Tricks, and Warnings - January 17th, 2017
- Secrets to Styling Angular2 - January 31st, 2017
- Jedi Angular 2 Tips and Tricks - March 28th, 2017
- Unit Testing Angular(2+) with JSDOM - April 4th, 2017
- More Control with Angular Flex Layout - April 11th, 2017
- Angular(2+) Model Driven Forms Are Superior - April 18th, 2017
- Dynamically Add Components in Angular - April 25th, 2017
- Using Real World NgRX - May 9th, 2017
- Functional Reactive Angular Revealed - May 30th, 2017
- NgRX/Store Coding Sanity Epiphany - June 6th, 2017
- Real World RxJS Marble Testing Revealed - June 13th, 2017
- How to Organize an Angular Application - June 20th, 2017
- Upload an Image as a File in Angular - July 4th, 2017
- How to Implement Angular 2+ Routing - July 18th, 2017
- TypeScript Basics for Angular Developers - August 1st, 2017
- Angular Observable Secrets Revealed - August 8th, 2017
- How to Upgrade NgRX to 4.x - August 15th, 2017
- Model View Presenter, Angular, and Testing - August 29th, 2017
- This One Tweak Improved my Angular Code - September 12th, 2017
- Upgrade to Angular from... - September 26th, 2017
- Using NgRX to Cleanly Aggregate Data - October 3rd, 2017
- NgRX 4 Actions - Class vs Object Literal - October 10th, 2017
- Implementing NgRX 4 - October 24th, 2017
- What I Learned Using Angular Material - October 31st, 2017
- Angular Ionic and Angular CLI - November 14th, 2017
- How to Really Screw Up an Angular Project - December 12th, 2017
- Angular Cross Field Validation - December 19th, 2017
- Attaching an Angular Child Component's Form to a Parent - January 2nd, 2018
- Why more Angular Modules are Better than One - January 16th, 2018