AngularJS migration to using imports/exports

Question

Our project is currently still running on AngularJS (v1.6) + TypeScript, but we want to start making the app ready to upgrade to the latest Angular, by implementing components, similar to how they are written in Angular. Currently we are not using imports or exports, but want to introduce this gradually. I.e. we would like to start using:

import * as angular from "angular";
import { MyComponentComponent } from './MyComponent.component';

export default angular
  .module('myModule', [])
  .component('myComponent', MyComponent);

instead of

angular
  .module('myModule', [])
  .component('myComponent', MyComponent);

Doing this however currently causes issues due to scope. Our app now has the global variable angular that everything gets attached to, while the import/export creates closures that inject a separate instance of angular, so the two aren't able to communicate.

Is there a way to to combine the two methods so that we can gradually upgrade the existing system?

Scalene

are you go through vsavkin.com/…? – Exist

@Exist that assumes that we are already using components with imports and exports, which we aren't.. – Scalene

first of all you do not have a 'global' variable called angular. You simply have an variable that can be imported - there is a difference. So I don't quite fully understand, so you export the angular variable and then in different classes import it and attach other modules to it? – Hallvard

@NicolasGehlert currently we don't import/export anything, but use the more plain version of AngularJS with Typescript and everything just gets initialised with angular.module('myModule').component('myComponent', MyComponent);, etc. But we want to start using imports to make our code ready for an upgrade. – Scalene

hm i don't see any problem with your approach. can you try to create a base example in stackblitz? – Hallvard

Answer 1

Using ngUpgrade to upgrade the angular is a very good suggestion. With the help of this, you can upgrade your existing angularjs project in a much more efficient way like converting the code side by side by running angularjs and angular code simultaneously. There are certain steps that you need to follow in order to perform migration successfully:

1. Installing dependencies for Angular and ngUpgrade.
2. Setup ngUpgrade for your project.

We are also currently in a process to migrate our angularjs project to angular. We have followed the below references for our migration. It will provide you a detailed overview of the process and hope it will help you in some way:

• https://scotch.io/tutorials/get-started-with-ngupgrade-going-from-angularjs-to-angular
• https://blog.angular.io/migrating-to-angular-fc9618d6fb04
• https://medium.com/contentsquare-engineering-blog/angularjs-to-angular5-upgrading-a-large-application-7e6fbf70bafa
• https://itnext.io/an-alternate-way-to-angular-migration-c7932cf05a1b

Clougher

Thanks! I'm stuck on step 1 though, we have a build with grunt (and AngularJS via bower). It's not clear to me, how I run Angular instead. Do I delete the old AngularJS from the build and replace by new one? – Scalene

@Scalene first step would be to ditch bower and switch to either npm or yarn. – Clougher

Next step would be to start converting your code to components from AngularJS gradually as components are easier to convert to Angular later on. – Clougher

while converting use both angular and angularJS simultaneously as instructed in one of the above references. – Clougher

Thanks, we've already started converting controllers and directives to components, but now at the stage where I want to start using Angular. We have a pretty big project though, either way, it's all quite tricky. – Scalene

Yes you have to be patient in order to successfully do this :D – Clougher

Answer 2

Try to use NgUpgrade, it will upgrade your app to the latest version.

Have a look on https://angular.io/guide/upgrade

Patrica

Answer 3

There are two ways (2 and 3 are similar but separate in action):

1. Rewriting the application (best way but difficult for huge applications)
2. Going to a hybrid state (e.g. upgrading without forking by having a transitional hybrid app with both AngularJS and Angular 5). See AngularJS to Angular5 — Upgrading a large application
3. Migrating each module wise. See Migrating Angular 1 Applications to Latest Angular in 5 Simple Steps

Diggs