We are in the process of transitioning our project from AngularJS (v1.6) + TypeScript to the latest version of Angular. To prepare for this upgrade, we want to start implementing components similar to how they are written in Angular. Currently, we are not using imports or exports, but we would like to gradually introduce them. For example:
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);
However, when we try to do this, it causes issues with scope. Our app currently relies on the global variable 'angular' for everything, while using import/export creates closures that inject a separate instance of 'angular', leading to communication problems between the two. Is there a way to combine these methods so that we can smoothly upgrade our existing system?