Angular集成Electron运行报Cannot use import statement outside a module错误如何解决

• 技术栈：Angular 12 + Electron 15 + TypeScript
• 首次启动报错：

import { enableProdMode } from '@angular/core';
^^^^^^
SyntaxError: Cannot use import statement outside a module

• 已尝试操作：package.json添加"type": "module"，报错未解决；后续将main.ts重命名为main.mjs，新增jest ESM适配配置，触发新报错：

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module.

• 现有配置如下：

package.json #

{
  "name": "desktop-app",
  "version": "0.0.0",
  "main": "main.ts",
  "type": "module",
  "scripts": {
    "ng": "ng",
    "start": "electron .",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "babel-preset-env": "^1.7.0",
    "path-browserify": "^1.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.9",
    "@angular/cli": "~12.2.9",
    "@angular/compiler-cli": "~12.2.0",
    "@babel/core": "^7.15.8",
    "@babel/node": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.20.33",
    "electron": "^15.2.0",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "nodemon": "^2.0.14",
    "typescript": "~4.3.5"
  },
  "browser": {
    "fs": false
  }
}

tsconfig.json #

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "path": ["./node_modules/path-browserify"]
    },
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

项目文件结构 #

按以下步骤操作即可解决问题：

1. 移除package.json中的"type": "module"配置，Electron 15对ESM的支持不完善，主进程使用CommonJS规范兼容性更好。
2. 修改tsconfig.json的编译配置，将compilerOptions.module的值改为CommonJS：

"compilerOptions": {
  // 其余原有配置保留，仅修改module字段
  "module": "CommonJS"
}

3. 调整package.json的main字段，将其从main.ts改为编译后输出的JS文件路径，比如"main": "dist/main.js"。Electron不能直接执行TS文件，必须指向编译后的JS文件。
4. 修改启动脚本，在启动Electron前先编译主进程的TS文件：

"scripts": {
  // 其余原有脚本保留，修改start:electron配置
  "compile:main": "tsc main.ts --outDir dist",
  "start:electron": "ng build --base-href ./ && npm run compile:main && electron ."
}

5. 回退之前的无效修改：将main.mjs改回main.ts，删除package.json中新增的jest ESM相关配置，该配置是针对单元测试的，和Electron启动无关。

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