Angular.ts 和 Electron：SyntaxError：不能在模块外使用 import 语句答案

【问题标题】：Angular.ts and Electron: SyntaxError: Cannot use import statement outside a moduleAngular.ts 和 Electron：SyntaxError：不能在模块外使用 import 语句
【发布时间】：2021-12-10 07:28:51
【问题描述】：

我在一个新的 Angular 应用程序上安装了 Electron，并通过运行 electron 得到了这个错误。我使用打字稿。错误信息：

从“@angular/core”导入 { enableProdMode }； ^^^^^^ SyntaxError: 不能在模块外使用 import 语句

在我将 "type": "module" 添加到 package.json 文件后也会显示此错误。

当我尝试通过将 main.ts 文件替换为 main.mjs 文件并将以下内容添加到 package.json 文件来使用 .mjs 扩展名时：

"jest": {
"preset": "ts-jest/presets/default-esm",
"globals": {
  "ts-jest": {
    "useESM": true
  }
},
"moduleNameMapper": {
  "^(\\.{1,2}/.*)\\.js$": "$1"
}

}

我收到以下错误：

错误 [ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块。

我的 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
  }
}

my files list

我能做些什么来解决它？请帮忙！感谢您的回复。

【问题讨论】：

标签： javascript angular typescript electron

【解决方案1】：

所以，我创建了一个新文件 - main.js - 无论 src 文件夹的 main.ts 是什么，并将电子代码放在这里。将它们联系起来是错误的。 JS和TS没有冲突。

【讨论】：