Upgrading to Angular 2 and TypeScript

After all that work using AngularJS (aka Angular 1) and plain ol' JavaScript, I decided to switch over to Angular 2 and TypeScript for this project. Here are a few reasons:

• This project was still in its infancy so it's a good time to switch.
• Angular 2 final has just been released.
• Angular 1, for all its awesomeness, was kindda quirky. It was almost like it wasn't written with JavaScript in mind. That's why I think Angular 2 with TypeScript is a killer combination.
• Angular 1 is gonna be deprecated sooner than later. You can already sense it in their documentation, particularly when they talk about Components for Angular 1(.5). 
• I originally thought Angular 2 could compile to native code on mobile seamlessly. This doesn't seem to be quite the case, but it's still a damn good option to have!
• It's about time I started using TypeScript.

Here are some benefits I'm already experiencing with this new project.

• Cleaner routes - Working with routes in Angular 2 is a much more pleasurable experience.
• Animations - ditto
• Modular - You may have been able to be pretty modular in Angular 1 too, but I feel Angular 2 (and its emphasis on components) combined with TypeScript / ES6 takes it to a whole new level.

One concrete example of the last point about modularity is that I think I am now (easily) able to uncouple our mapping backend!

Originally we were quite set on OpenLayers and pretty opinionated about using it and only it. Giving it some more thought, using the proof-of-concept app, and appreciating the last point above, I came to realize that it doesn't have to be that way. I can expose a common API to the mapping backend and be able to swap OpenLayers out for something else.

This would be useful for an ESRI shop, for example. Yes you can export all ESRI layers in a format for OL to consume, but it would significantly affect one's workflow. Take styling a WFS layer: An ArcGIS Feature Layer would already have all the symbologies built in, while a WFS would not. Being able to use ArcGIS API for JS would be quite an advantage in this case.

I hope to get around to writing an ESRI backend too in the future, but for now I will focus on OL, but will keep in mind to write a solid API for this to happen. Here's how Angular 2 and TypeScript is already allowing me to do just that:


It's a matter of uncommenting a line from a couple of files to swap out the mapping backend! Notice that in the "app.module.ts" it's just abstractingly importing whatever "MapModule" our "map.module.ts" is exporting. We can map "MapModule" to anything!