如何在Angular+Electron项目中无需编译直接运行TypeScript入口文件main.ts

我来帮你一步步解决这个问题，你现在遇到的ERR_MODULE_NOT_FOUND错误，主要是因为Angular的TypeScript配置是针对浏览器环境的，和Electron主进程的Node.js环境模块解析逻辑不兼容，再加上tsx的使用没有匹配正确的配置导致的。咱们来一步步调整：

1. 安装必要的依赖 #

首先确保你安装了tsx（用来直接运行TypeScript的Node.js工具）和Electron/Node的类型定义，在项目根目录执行：

npm install -D tsx @types/electron @types/node

2. 给Electron主进程单独配置TypeScript #

Angular的tsconfig.json是为前端打包优化的，不适合Electron主进程的Node.js环境，咱们在electron目录下创建一个单独的tsconfig.json：

// electron/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    "outDir": "./compiled-js", // 和你生产编译的输出目录保持一致
    "types": ["node", "electron"] // 引入Node和Electron的类型定义
  },
  "include": ["./**/*.ts"], // 包含electron目录下所有ts文件
  "exclude": ["node_modules", "./compiled-js"] // 排除编译输出和依赖包
}

3. 调整开发启动脚本（electron:start） #

修改package.json里的electron:start脚本，让tsx使用咱们刚创建的Electron专属tsconfig，同时简化配置避免转义问题：

"electron:start": "concurrently \"ng serve\" \"wait-on tcp:4200 && tsx --tsconfig ./electron/tsconfig.json ./electron/main.ts --dev --remote-debugging-port=9222\""

为什么这么改？ #

• 用tsx直接调用替代NODE_OPTIONS="--import tsx"的方式，更直观且不容易出现配置冲突
• 指定--tsconfig ./electron/tsconfig.json，强制tsx使用Electron主进程的TypeScript配置，而不是继承Angular的浏览器端配置
• 去掉了不必要的转义字符，让脚本更易读和维护

4. 解决ES模块/CommonJS兼容问题（可选） #

如果你的main.ts里用了ES模块语法（import/export），但根目录package.json没有声明"type": "module"，那需要在electron目录下创建一个小型package.json来标记该目录下的文件为ES模块：

// electron/package.json
{
  "type": "module"
}

5. 验证生产编译流程 #

你的electron:build脚本目前是先构建Angular，再编译TypeScript，最后用electron-builder打包，咱们只需要确保compile-typescript脚本使用Electron的tsconfig就行。如果你的compiler.mjs是自定义编译脚本，建议改成调用官方tsc工具并指定配置：

"compile-typescript": "tsc -p ./electron/tsconfig.json"

这样生产编译时会用正确的配置把Electron的ts文件编译到electron/compiled-js目录下，和你package.json里的main字段完全对应。

测试运行 #

现在执行npm start，应该能正常启动Angular开发服务器和Electron，直接运行main.ts而无需提前编译了！

内容来源于stack exchange