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?

Answer 1

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

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