Angular.ts and Electron: SyntaxError: Cannot use import statement outside a module

Question

我在一个新的 angular 应用程序上安装了 Electron，然后运行 electron 收到了这个错误。我使用打字稿。错误信息：

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

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

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

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

}

我收到以下错误：

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

my files list

我该如何解决？请帮忙！感谢您的回复。

Answer 1

所以，我创建了一个新文件 - main.js - 不管 src 文件夹的 main.ts 并将电子代码放在这里。他们之间link是个错误。 JS和TS没有冲突

Angular.ts and Electron: SyntaxError: Cannot use import statement outside a module

Angular.ts and Electron: SyntaxError: Cannot use import statement outside a module

javascript

typescript

electron

angular