Débogage de Typescript dans VSCode

Question

Je vois beaucoup d'informations sur ce qui semble être des versions plus anciennes de VSCode (v1.16.1 - plus récent à ce jour) ou des attributs du fichier launch.json qui sont obsolètes.

J'ai essayé une myriade d'attributs de configuration, des informations plus anciennes sur les forums GitHub (certains ne sont pas viables car les attributs ont disparu, ou sont devenus obsolètes). Essayer de déboguer et d'atteindre les points d'arrêt directement dans le code de type typographique dans VSCode.

Actuellement, voici mon tsconfig.json fichier:

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

Mon fichier launch.json pour le code Visual Studio est:

{ 
    "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 ouvre, mais la norme La page "... refusé la connexion" s'affiche:

En ce moment, essayez simplement de déboguer un de ces "modèles d'administration" typiques. Je peux l'exécuter parfaitement à travers le terminal: ng servir

Cependant, le débogage de cette application angulaire me trompe. A noter que je suis complètement nouveau pour Angular, Typescript et VSCode en général.

Answer 1

Avez-vous essayé de spécifier l'attribut outFiles de votre configuration à quelque chose comme:

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

Selon this docs le réglage "sourceMaps": true indique vscode pour cartographier le produit *.js avec les *.ts fichiers. De plus, vous devez définir l'attribut outFiles pour indiquer à vscode où rechercher ces fichiers *.js s'ils ne se trouvent pas dans le même répertoire.

De la documentation:

Si les générés (transpiled) fichiers JavaScript ne vivent pas à côté de leur source, mais dans un répertoire distinct, vous devez aider le débogueur de code VS les localiser en définissant l'attribut outFiles .