angularjsangulartypescriptangularjs-components

AngularJS migration to using imports/exports

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?

Solution

  • 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: