Risposte:
launch.json(all'interno della cartella .vscode)launch.json(vedi sotto)tasks.json(all'interno della cartella .vscode)tasks.json(vedi sotto)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(vedi sotto)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 Servere poi lanciare Chromecon un solo F5clic?
launch.jsone tasks.jsonfa qui. Come ho capito launch.jsonè quello di avviare il server del nodo e ascoltare la porta 8080 e tasks.jsonindica di utilizzare npmed eseguire il comando ng serveper eseguire l'applicazione.
Sembra che il team VS Code stia ora archiviando le ricette di debug.
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"]
}
]
}
Ci sono due modi diversi per farlo. È possibile avviare un nuovo processo o collegarsi a uno esistente.
Il punto chiave in entrambi i processi è avere il server di sviluppo webpack e il debugger VSCode in esecuzione contemporaneamente .
Nel tuo launch.jsonfile aggiungi la seguente configurazione:
{
"version": "0.2.0",
"configurations": [
{
"name": "Angular debugging session",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Esegui il server di sviluppo Webpack da Angular CLI eseguendo npm start
Per questo è necessario eseguire Chrome in modalità debugger con porta aperta (nel mio caso sarà 9222):
Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Finestre:
chrome.exe --remote-debugging-port=9222
launch.json il file avrà il seguente aspetto:
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
npm startIn questo caso, debugger collegato al processo Chrome esistente invece di avviare una nuova finestra.
Ho scritto il mio articolo, in cui ho descritto questo approccio con illustrazioni.
Semplici istruzioni su come configurare il debugger per Angular in VSCode
chrome.exe --remote-debugging-port=9222C'è qualche alternativa per la configurazione una
Questo è spiegato in dettaglio sul sito di Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial
Può usare questa configurazione:
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Ecco una soluzione un po 'più leggera, funziona con Angular 2+ (sto usando Angular 4)
Aggiunte anche le impostazioni per Express Server se si esegue lo stack 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 risposta di @Asesjix è molto approfondita, ma come alcuni hanno sottolineato, richiede ancora più interazioni per avviare ng servee quindi avviare l'app Angular in Chrome. Ho funzionato con un solo clic utilizzando la seguente configurazione. La differenza principale rispetto alla risposta di @ Asesjix è che il tipo di attività è adesso shelle le chiamate di comando si aggiungono startprima, ng servequindi ng servepossono esistere nel proprio processo e non bloccare l'avvio del debugger:
tasks.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"
}
]
}
Nel mio caso non avevo usato l'albero delle cartelle del progetto Angular originale e sapevo che c'era qualcosa che non andava con il bit webRoot/ {workspaceFolder}ma tutti i miei esperimenti non hanno prodotto alcun risultato. Ho ricevuto un suggerimento da un'altra risposta SO che collegherò se lo trovo di nuovo.
Ciò che mi ha aiutato è stato trovare il contenuto della variabile {workspaceFolder}in fase di esecuzione e quindi modificarlo nella posizione della mia cartella "src" in cui hai "app / *". Per trovarlo, ho aggiunto un preLaunchTaskal mio file launch.json e un'attività per l'output del valore {workspaceFolder}.
launch.json , che appare dopo l'installazione del debugger di 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 presente per impostazione predefinita. Premi Ctrl + Maiusc + p e penso che si chiami "crea attività per un altro comando" o qualcosa di simile. Non riesco a vederlo dopo la creazione di tasks.json. Puoi anche creare il file nella stessa posizione di launch.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Echo values",
"command": "echo",
"args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
"type": "shell"
}
]
}
Una volta che ho conosciuto il valore di $ {workspaceFolder}, l'ho corretto in modo che punti alla mia cartella src nel mio nuovo albero del progetto e tutto ha funzionato. Il debug richiede ng servedi essere stato eseguito come attività di preavvio o come parte della compilazione (esempi sopra) o in un prompt dei comandi.
Ecco un collegamento a tutte le variabili che puoi utilizzare: