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

Posted 2023-03-22

【中文标题】Angular.ts 和 Electron：SyntaxError：不能在模块外使用 import 语句

【英文标题】：Angular.ts and Electron: SyntaxError: Cannot use import statement outside a module

【发布时间】：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

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

【参考方案1】：

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