AngularJS应用中TypeScript模块编译配置及import转require问题咨询

我完全懂你的困扰——用TypeScript重构AngularJS项目，本来想靠模块实现动态加载和组件复用，结果因为没手动new导入的服务，编译后的JS直接丢了require调用，Webpack打包出来的bundle缺了关键代码。这其实是TypeScript的未使用导入自动消除机制在搞鬼，下面给你几个实用的解决办法：

1. 用副作用导入搞定模块注册 #

如果你的ServiceXYZ模块里写了AngularJS的服务注册代码（比如angular.module('myApp').service('ServiceXYZ', ServiceXYZ)），那这个模块本身是有“副作用”的——导入它就会执行注册逻辑。这种情况下直接这么写：

// 不用引用具体成员，只导入模块本身，强制编译器保留require调用
import "./ServiceXYZ";

编译后的JS就会保留require("./ServiceXYZ")，Webpack自然会把这个模块打包进bundle。

2. 加一行“伪使用”代码骗编译器 #

要是你需要导入类型同时保留模块引用，就给编译器加个“小提示”，让它觉得这个导入的成员被实际使用了：

import { ServiceXYZ } from "./ServiceXYZ";

// 用void标记它被使用，不会影响运行逻辑
void ServiceXYZ;

或者更简单的写法：

import { ServiceXYZ } from "./ServiceXYZ";

// 定义个无用变量引用它，仅用于骗过编译器
const _unused = ServiceXYZ;

这样编译器就不会把require调用删掉了，毕竟它会认为你真的用到了这个成员。

3. 调整tsconfig辅助适配TS 2.6.2 #

TS 2.6.2还没引入importsNotUsedAsValues这类专门控制导入保留的新选项，不过可以先关掉两个严格检查避免编译报错：

{
  "compilerOptions": {
    // ...你的其他原有配置
    "noUnusedLocals": false,
    "noUnusedParameters": false
  }
}

不过这个只是辅助手段，核心解决还是前两种方法。

问题根源说明 #

TypeScript编译时会严格区分类型和值：你如果只把导入的成员当类型用（比如构造函数参数的类型注解），编译到JS时这些类型信息会被彻底删掉——毕竟JS不支持类型系统。只有当你在运行时代码里用到了这个成员的“值”（比如new实例化、调用函数、访问变量），编译器才会保留对应的require调用。而AngularJS的依赖注入是框架层面的逻辑，TS编译器根本不知道你导入的服务会被框架实例化，所以就把它当成没用的导入自动移除了。

内容的提问来源于stack exchange，提问作者AbVog