使用 Typescript 和 Webpack 管理依赖项的 AngularJS

Posted 2023-03-13

【中文标题】使用 Typescript 和 Webpack 管理依赖项的 AngularJS

【英文标题】：AngularJS with Typescript and Webpack managing dependencies

【发布时间】：2019-01-30 09:56:37

【问题描述】：

我的团队的任务是迁移 AngularJS 应用程序以使用 Webpack 作为构建系统并结合 TypeScript。这一切都是为了将​​应用程序从 AngularJS 逐步迁移到 Angular 做准备。 （我们遵循 Angular 团队提供的迁移指南）

今天我遇到了 TypeScript 的“导入”语句的问题，我似乎找不到原因。我找到了解决方案，但想知道为什么会这样。

在这个测试运行中，我在 2 个不同的文件中有 2 个模块。 AuthModule 和 LoginModule 。我认为他们的依赖是循环的， 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]);
...

这些只是 2 个小的 sn-ps，它是内置的，在浏览器中查看时一切正常。

但是，当我将文件转换为 TypeScript 时，它似乎并不喜欢这种循环依赖。该应用程序内置 webpack 没有错误，但在浏览器中被炸毁。

要修复它，我需要不在 LoginModule 中“导入”AuthModule，并且在向 LoginModule 提供依赖项时，我需要提供本地字符串而不是导入的字符串.

//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
...

这构建和工作正常，我对此很好，但想了解原因。 TypeScript 导入和“webpack”导入有什么区别。我的 .tsconfig 模块属性设置为 CommonJS 。是这个原因吗？

【问题讨论】：

浏览器出现什么错误？

【参考方案1】：

据我了解，当您导入 LoginModule 时，您正在导入该 LoginModule 的实例，因此 angular.js 会引发错误。相反，您需要在该模块声明中提供一个字符串，这就是它起作用的原因。