Angular 8 Electron 7 构建缺少“。”在 webpack:// 在 Chrome 开发者工具源中答案

【问题标题】：Angular 8 Electron 7 build missing "." in webpack:// in Chrome developer tools sourcesAngular 8 Electron 7 构建缺少“。”在 webpack:// 在 Chrome 开发者工具源中
【发布时间】：2020-02-26 23:30:29
【问题描述】：

我最近升级到了 Angular 的 v8 和 Electron 的 v7。在更新之前，chrome 中的源选项卡具有以下路径（webpack:// > webpack > .）。当我运行 ng build --watch 和 npm run electron 更新后，应用程序正确打开，但现在我无法调试，因为 webpack:// 只显示“./lib”和“webpack > bootstrap”。正常的 src 文件夹和我的所有组件及其关联的 .ts 文件从源中丢失，尽管应用程序运行正常。

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 开发工具中正确调试项目。

【问题讨论】：

标签： angular webpack electron google-chrome-devtools

【解决方案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"
    ]
  }
}

【讨论】：