CODEWITHSUNDEEP
javascriptangularjsecmascript-6es6-modules
iamchris
iamchris

Reputation: 2721

How to Migrate from AngularJS Module system to ES6 Modules

We have a project that uses ES5 and relies upon Angular 1.x's module system. I've seen plenty of guides that say "Step One: Re-write everything", but that's not really optimal for a large codebase that's changing hourly.

Is there a way to make this painful change slightly more piecemeal? From what I've, it may be easier to completely migrate to Angular 2+ rather than get the benefits of ES6 using Angular 1.x.

My initial thought would be to add import statements (commented out, to not break the build) at the top of each file, while still using Angular's module system. That way each ES6 module contains an AngularJS module. When all files have that, we uncomment the imports and change the build system over to webpack. Then we can go through one-by-one and ES6-ify the actual code as we have time.

Upvotes: 2

Views: 1963

Answers (1)

thomasmost
thomasmost

Reputation: 1070

I took the "rewrite everything" approach moving an AngularJS app to Angular and it was well worth it. But I totally understand how your circumstances may demand that you find a less interruptive migration path.

I'm currently in the process of migrating another AngularJS app, a much larger one, to a modern framework. The good news is, with some care and caution, there is no reason not to run two SPA frameworks at the same time during a transitional period like this. For example, you can bootstrap Aurelia inside of an AngularJS application, and if you decouple your state management (for example, by using Redux) AngularJS and Aurelia components can both subscribe equally well to your data stores.

The big question that remains is, should you switch frameworks? AngularJS is perfectly good for medium sized applications, especially if you maintain good separation of concerns. But it falls down in a few ways:

  1. If you want your app to run smoothly on mobile phones and chromebooks, you should switch. AngularJS is markedly slower than modern frameworks, and demands much more client processing power. There's also not a good way to implement server-side rendering with AngularJS, which can also help mobile performance.
  2. If your app displays long lists, or complex, tabular data that needs to update regularly, you should switch. AngularJS is not good at rendering a lot of information at once, especially if it needs to live update or if it is heaviy interrelated.

As for implementing ES6 modules for AngularJS, you can take the time to export components and import/register them on the AngularJS module in a separate file -- which is quite like what Angular does now. But I'm not sure what the benefits are. What specifically are you hoping to achieve with that?

If it is explicitly to take advantage of Webpack, I would agree that adding the imports and exports over time is a good first step, and that you should define your components and directives as exports in each file.

e.g.

my-component.js 

class MyComponentController { ... }

export var MyComponent = {
    bindings: {...},
    controller: MyComponentController, 
    template: `...`
}

main.js

import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);

Hope this helps!

Upvotes: 3

Related Questions