angular - VSCode'da Typescript Hata Ayıklama

Dışarıda, VSCode'un daha eski sürümleri için gibi görünen (v1.16.1 - bu yazının yazıldığı an itibarıyla en son) ya da launch.json dosyasındaki kullanımdan kalkmış öznitelikler için çok fazla bilgi görüyorum.

GitHub forumlarındaki bazı eski bilgiler de dahil olmak üzere sayısız yapılandırma özniteliğini denedim (bazıları artık geçerli değil çünkü öznitelikler kaldırıldı veya kullanımdan kalktı). VSCode içinde Typescript kodunda doğrudan hata ayıklayıp kesme noktalarına ulaşmaya çalışıyorum.

Şu anda, işte benim tsconfig.json dosyam:

    {
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/",
    "baseUrl": "src",
    "module": "commonjs",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "include": [
      "src/**/*.ts"
  ],
    "exclude": [
      "node_modules"
  ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Visual Studio Code için launch.json dosyam şudur:

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Launch Chrome",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:3000/",
          "sourceMaps": true,
          "trace": true,
          "webRoot": "${workspaceRoot}/src",
          "userDataDir": "${workspaceRoot}/.vscode/chrome",
          "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
          }
      }
  ]
}

Chrome açılıyor, ancak standart “...bağlantı reddedildi” sayfası görüntüleniyor:

Şu anda, sadece tipik bir 'admin şablonunu' hata ayıklamaya çalışıyorum. Terminal üzerinden mükemmel bir şekilde çalıştırabiliyorum: ng serve

Ancak, bu Angular uygulamasını hata ayıklamak benim için zor oluyor. Angular, Typescript ve genel olarak VSCode konusunda tamamen yeni olduğumu belirtmek gerekir.

Cevap #1

Yapılandırmanızın outFiles özniteliğini şöyle bir şeye belirtmeyi denediniz mi:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

Bu belgelere göre, "sourceMaps": true ayarı vscode'a üretilen *.js dosyalarını *.ts dosyalarıyla eşleştirmesini söyler. Ayrıca, vscode'a bu *.js dosyalarını hangi dizinde araması gerektiğini belirtmek için outFiles özniteliğini ayarlamanız gerekir, eğer aynı dizinde değillerse.

Belgelerden:

Oluşturulan (derlenmiş) JavaScript dosyaları kaynaklarının yanında değil de ayrı bir dizinde bulunuyorsa, VS Code hata ayıklayıcısının onları bulmasına yardımcı olmak için outFiles özniteliğini ayarlamanız gerekir.