Angular升级后gulpfile.ts出现ERR_UNKNOWN_FILE_EXTENSION错误求助

核心问题原因 #

你当前的ts-node配置和TypeScript模块系统设置冲突，加上Node 16对ESM/CommonJS的严格校验，导致无法识别.ts文件扩展名。具体来说：

• ts-node开启了esm: true，但compilerOptions.module设为commonjs，两者不兼容
• 若package.json存在"type": "module"，Node默认以ESM模式加载文件，进一步加剧冲突

快速修复方案（保留CommonJS模式） #

1. 修改tsconfig.json中的ts-node配置
   将ts-node.esm改为false，确保和compilerOptions.module的commonjs匹配：

   {
     "ts-node": {
       "esm": false
     },
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       // 其他原有配置保持不变
     },
     // 其他原有配置保持不变
   }
   

2. 调整gulp运行命令
   在package.json的scripts中添加或修改gulp命令，明确用ts-node编译执行：

   "scripts": {
     "gulp": "ts-node ./node_modules/gulp/bin/gulp.js"
   }
   

   之后运行npm run gulp代替直接的gulp命令。

3. 检查package.json的type字段
   如果package.json里有"type": "module"，要么删除该字段，要么改为"type": "commonjs"，避免Node强制使用ESM模式。

可选方案（切换到ESM模式） #

如果想适配Angular 16的ESM趋势，可以切换到ESM模块系统：

1. 修改package.json
   添加"type": "module"字段
2. 更新tsconfig.json

   {
     "ts-node": {
       "esm": true
     },
     "compilerOptions": {
       "target": "es6",
       "module": "ESNext",
       "moduleResolution": "NodeNext",
       // 其他原有配置保持不变
     },
     // 其他原有配置保持不变
   }
   

3. 更新gulp运行命令

   "scripts": {
     "gulp": "ts-node --esm ./node_modules/gulp/bin/gulp.js"
   }
   

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