Angular 8 Electron 7 build отсутствует "."в веб-пакете: // в источниках инструментов разработчика Chrome

Question

Я недавно обновился до версии 8 Angular и версии 7 Electron. До обновления вкладка источников в chrome имела следующий путь (webpack: //> webpack>.). После обновления, когда я запускаю ng build --watch и npm, запустите Electron , приложение открывается правильно, но теперь я не могу отладить, так как веб-пакет: // показывает только "./lib" и "webpack> bootstrap ". Обычная папка src и все мои компоненты и связанные с ними файлы .ts отсутствуют в источниках, хотя приложение работает правильно.

chrome dev tools ss

Я заметилчто когда я делаю ng serve и открываю страницу localhost, webpack: // действительно показывает содержимое правильно. Это заставляет меня думать, что это может быть вызвано тем, что Electron упаковывает уже упакованное угловое приложение, но я не уверен.

Файл конфигурации 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"
    ]
  }
}

Без веб-пакета: // сопоставление файлов правильно Я не могу правильно отладить проект в инструментах Chrome Dev.

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