So you’ve heard about the recent Angular 2 beta release and all of the features it introduces and you’re thinking about upgrading an Angular 1 app to Angular 2. The good news is the Angular team has created features (ngUpgrade and ngForward) to make the migration process possible, maybe even easy. The bad news is the ease of the migration is completely dependent on how well your current app is built. Upgrading to Angular 2 will be simple if your application is:
- Modular in design
- Adhering to the Rule of 1
- Using the Folder-by-Feature directory structure
- Using component directives
If not, upgrading to Angular 2 could get complicated. Angular 2, unlike Angular 1, is a component-based framework. Adhering to these four criteria will break your Angular 1 application into components. This restructuring will allow you to migrate your application component by component, with Angular 1 and Angular 2 components coexisting.
Also, just in case you missed the memo, those four items are included in the Angular 1 Style Guide. I missed the memo before I finished my first Angular application so I’m not pointing fingers. In any event, if the app you want to migrate does none or maybe just a couple of the items on the list above, like the application I’ll be migrating with ngUpgrade, you have work to do.
Modularity
Making an application modular, consisting of small modules, each with a single responsibility, is a rather subjective task. If you’re unfamiliar with the concept, it may be hard to gauge if your application complies. However, if you have files with hundreds of lines of code, or an app folder with no subfolders, those are code smells. It may be worth doing further reading on modular design in Angular and maybe even implementing the Folder-by-Feature directory structure before you assess how your files can be broken down even further. The app I’ll be migrating is small and modular, so my work here is done. I’m going to move on to implementing the Rule of 1.
Rule of 1
According to the Angular 1 Style Guide, the Rule of 1 states that you should “Define 1 component per file, recommended to be less than 400 lines of code”. I almost thought my app was free of such transgressions until I noticed that my app.js file included a definition of my app module chained to the configuration definition chained to a controller definition, similar to the example the style guide provides of what should be avoided. Yay! To remedy the situation, I created app.controller.js and app.config.js files and split up the logic.
App.js
App.config.js
App.controller.js
I also had to update gulp tasks, which proved to be a warm-up for the next step in my journey.
Folder-by-Feature Structure
If you’re not using the Folder-by-Feature directory structure, this is where things can get ugly. Depending on the size of your application and the folder structure (or lack thereof) used in it, this might be a tedious and time-consuming process. You’ve been warned.
The application I’m preparing for migration is using the Folder-by-Type structure, so I’m at least working with a structure, though not the recommended one. The easiest way to proceed is to make a small change (or break the app a little), fix it, and then repeat until you’re done. It goes without saying that this should be happening in an isolated environment (a git branch or the like).
Before (Folder-by-Type structure with files of each kind in their respective folders)
After
Component Directives
Since component directives are the only type of directive that is Angular 2 compliant, any non-component directives must be converted. That means that all directives should be configured to be used as elements, have their own controllers and templates, and use the controllerAs attribute, among other things. Thankfully, my application has component-ish directives, so I only need to make a few changes.
Before
After
I also needed to add the controllerAs alias to my controller member reference.
And now my prep work is complete. The main takeaway here is that Angular 1 applications that follow the Angular 1 Style Guide are the best candidates for migration to Angular 2. But specifically, if you implement the modular design, adhere to the Rule of 1, use the Folder-by-Feature directory structure and component directives, you’re ready for migration.