AngularJS with Typescript and Webpack managing dependencies

My team is tasked with migrating an AngularJS application to use Webpack as a build system combined with TypeScript. This is all done as a prep to gradually move an application from AngularJS to Angular. (We are following migration guides provided by the Angular team)

Today I ran into an issue with TypeScript’s ‘Import’ statement and I can’t seem to find the reason for it. I found a solution, but want to know why this is the case.

In this test run I am having 2 modules in 2 different files. AuthModule and LoginModule . I think their dependency is Circular in that AuthModule -> LoginModule -> AuthModule

//in auth.module.js (this module is loaded before LoginModule)
import {LoginModule} from './login.module'; //is just an exported string

const authModule = angular.module('auth.module', [LoginModule])';
...


//in login.module.js
import {AuthModule} from './auth.module'; //again just an exported string

const LoginModule = angular.module('login.module', [AuthModule]);
...

Those are just 2 small snippets and this built and when viewed in the browser everything was working fine.

However, the moment I converted the files to TypeScript it did not seem to like that circular dependency. The app built in webpack without errors, but bombed in the browser.

To fix it I needed to not ‘Import’ AuthModule in LoginModule and when providing the dependency to the LoginModule I needed to provide a local string instead of the imported String.

//in login.module.ts (don't import AuthModule)
const LoginModule = angular.module('login.module', ['auth.module']); //just provide the name of the module here as a string
...

This builds and works fine and I am fine with that, but want to understand why. What is the difference between a TypeScript import and a ‘webpack’ import. My .tsconfig module property is set to CommonJS . Is that why?

Source: AngularJS