Angular 8 Electron 7 build 缺少“.”在 webpack:// 在 Chrome 开发者工具源中

Question

我最近升级到 Angular 的 v8 和 Electron 的 v7。在更新之前，chrome 中的源选项卡具有以下路径 (webpack:// > webpack > .)。更新后运行 ng build --watch 和 npm 运行 electron 应用程序正确打开但现在我不能debug 因为 webpack:// 只显示“./lib”和 "webpack > bootstrap"。源中缺少正常的 src 文件夹和我的所有组件及其关联的 .ts 文件，但应用运行s 正确。

chrome dev tools ss

我注意到当我执行服务并打开本地主机页面时，webpack:// 确实正确显示了内容。这让我认为这可能是由于 Electron 打包了已经打包的 angular 应用程序造成的，但我不确定。

Angular.json 构建的配置文件

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    "outputPath": "dist/*appName*",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "src/tsconfig.app.json",
          "assets": [
              "src/favicon.ico",
              "src/assets"
           ],
           "styles": [
                "src/app/themes/custom-theme.scss",
                "src/styles.css"
            ],
            "scripts": [
            ]
      },
      "configurations": {
          "production": {
           "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
            ],
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true
        }
    }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",    
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

如果 webpack:// 文件映射不正确，我无法在 chrome 开发工具中正确调试项目。

Answer 1

对于发现自己处于这种情况的任何人，我能够通过将 Electron 降级到版本 6.1.2 来纠正这个问题。请记住，如果您降级，则需要处理 Angular 现在与 type="module" 捆绑在一起的事实，因此您可能会在加载时看到有关它的错误。

TL:DR

降级到 Electron v6.1.2
将 tsconfig.json 设置为目标 es5

tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",    
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Angular 8 Electron 7 build 缺少“.”在 webpack:// 在 Chrome 开发者工具源中

Angular 8 Electron 7 build missing "." in webpack:// in Chrome developer tools sources

google-chrome-devtools

webpack

electron

angular