Réponses:
launch.json(dans le dossier .vscode)launch.json(voir ci-dessous)tasks.json(dans le dossier .vscode)tasks.json(voir ci-dessous)launch.json for angular/cli >= 1.3
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Chrome (Test)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Chrome (E2E)",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceFolder}/protractor.conf.js"]
}
]
}
tasks.json for angular/cli >= 1.3
{
"version": "2.0.0",
"tasks": [
{
"identifier": "ng serve",
"type": "npm",
"script": "start",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"identifier": "ng test",
"type": "npm",
"script": "test",
"problemMatcher": [],
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
launch.jsonlaunch.json(voir ci-dessous)ng serve)launch.json for angular/cli >= 1.0.0-beta.32
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"runtimeArgs": [
"--disable-session-crashed-bubble"
]
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}
launch.json for angular/cli < 1.0.0-beta.32
{
"version": "0.2.0",
"configurations": [
{
"name": "Lunch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src/app",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./src/*": "${workspaceFolder}/src/*"
},
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"runtimeArgs": [
"--disable-session-crashed-bubble"
]
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"webRoot": "${workspaceFolder}/src/app",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./src/*": "${workspaceFolder}/src/*"
}
}
]
}
NG Live Development Serverpuis lancer Chromeen un seul F5clic?
launch.jsonet tasks.jsonfait ici. Comme je l'ai compris, il launch.jsonfaut lancer le serveur de nœud et écouter le port 8080, et tasks.jsondemander à utiliser npmet à exécuter la commande ng servepour exécuter l'application.
Il semble que l'équipe VS Code stocke maintenant des recettes de débogage.
https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome with ng serve",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Chrome with ng test",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/protractor.conf.js"]
}
]
}
Il y a deux façons différentes de faire cela. Vous pouvez lancer un nouveau processus ou vous attacher à un processus existant.
Le point clé dans les deux processus est d'avoir le serveur de développement webpack et le débogueur VSCode en même temps .
Dans votre launch.jsonfichier, ajoutez la configuration suivante:
{
"version": "0.2.0",
"configurations": [
{
"name": "Angular debugging session",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Exécutez le serveur de développement Webpack depuis Angular CLI en exécutant npm start
Pour cela, vous devez exécuter Chrome en mode débogueur avec le port ouvert (dans mon cas, ce sera le cas 9222):
Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Les fenêtres:
chrome.exe --remote-debugging-port=9222
launch.json Le fichier ressemblera à ceci:
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
npm startDans ce cas, le débogueur est associé au processus Chrome existant au lieu de lancer une nouvelle fenêtre.
J'ai écrit mon propre article, où j'ai décrit cette approche avec des illustrations.
Instruction simple comment configurer le débogueur pour Angular dans VSCode
chrome.exe --remote-debugging-port=9222Y a-t-il une alternative pour la configuration
Ceci est expliqué en détail sur le site Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial
Peut utiliser cette configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Voici une solution un peu plus légère, fonctionne avec Angular 2+ (j'utilise Angular 4)
Ajout des paramètres d'Express Server si vous exécutez la pile MEAN.
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Angular Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"runtimeArgs": [
"--user-data-dir",
"--remote-debugging-port=9222"
],
"sourceMaps": true,
"trace": true,
"webRoot": "${workspaceRoot}/client/",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
},
{
"type": "node",
"request": "launch",
"name": "Launch Express Server",
"program": "${workspaceRoot}/server/bin/www",
"outFiles": [
"${workspaceRoot}/out/**/*.js"
]
}
]
}
La réponse @Asesjix est très complète, mais comme certains l'ont souligné, il faut toujours plusieurs interactions pour démarrer ng serve, puis lancer l'application Angular dans Chrome. Je l'ai fait fonctionner en un seul clic en utilisant la configuration suivante. La principale différence avec la réponse de @ Asesjix est que le type de tâche est maintenant shellet que les appels de commande s'ajoutent startavant ng serveafin de ng servepouvoir exister dans son propre processus et ne pas empêcher le débogueur de se lancer:
tâches.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "ng serve",
"type": "shell",
"command": "\"start ng serve\""
},
{
"label": "ng test",
"type": "shell",
"command": "\"start ng test\"",
}
]
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "ng serve"
}
]
}
Dans mon cas, je n'avais pas utilisé l'arborescence de dossiers du projet Angular d'origine et je savais qu'il y avait quelque chose qui n'allait pas avec le webRoot/ {workspaceFolder}bit, mais toutes mes expériences n'ont donné aucun résultat. Vous avez une astuce d'une autre réponse SO que je lierai si je la retrouve.
Ce qui m'a aidé a été de trouver le contenu de la variable {workspaceFolder}au moment de l'exécution, puis de le modifier à l'emplacement de mon dossier "src" sous lequel vous avez "app / *". Pour le trouver, j'ai ajouté un preLaunchTaskà mon fichier launch.json et une tâche pour afficher la valeur de {workspaceFolder}.
launch.json , qui apparaît après l'installation du débogueur Chrome
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src/newProjectRoot/",
"preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
}
]
}
Tasks.json Non présent par défaut. Appuyez sur Ctrl + Maj + p et je pense que cela s'appelle «créer une tâche pour une autre commande» ou quelque chose de similaire. Impossible de le voir après la création de tasks.json. Vous pouvez également simplement créer le fichier au même emplacement que launch.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Echo values",
"command": "echo",
"args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
"type": "shell"
}
]
}
Une fois que j'ai connu la valeur de $ {workspaceFolder}, je l'ai corrigé pour qu'il pointe vers mon dossier src dans ma nouvelle arborescence de projet et tout a fonctionné. Le débogage doit ng serveavoir été exécuté soit en tant que tâche de pré-lancement, soit dans le cadre de la construction (exemples ci-dessus) ou dans une invite de commande.
Voici un lien vers toutes les variables que vous pouvez utiliser: