Respostas:
launch.json(dentro da pasta .vscode)launch.json(veja abaixo)tasks.json(dentro da pasta .vscode)tasks.json(veja abaixo)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(veja abaixo)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 depois iniciar Chromecom apenas um F5clique?
launch.jsone tasks.jsonfaz aqui. Pelo que entendi launch.jsoné iniciar o servidor do nó e ouvir a porta 8080, e tasks.jsoninstrui a usar npme executar o comando ng servepara executar o aplicativo.
Parece que a equipe do VS Code agora está armazenando receitas de depuração.
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"]
}
]
}
Existem duas maneiras diferentes de fazer isso. Você pode iniciar um novo processo ou anexar a um existente.
O ponto principal nos dois processos é ter o servidor de desenvolvimento webpack e o depurador VSCode em execução ao mesmo tempo .
No seu launch.jsonarquivo, adicione a seguinte configuração:
{
"version": "0.2.0",
"configurations": [
{
"name": "Angular debugging session",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Execute o servidor de desenvolvimento Webpack a partir da CLI angular executando npm start
Para isso, você precisa executar o Chrome no modo depurador com porta aberta (no meu caso, será 9222):
Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Janelas:
chrome.exe --remote-debugging-port=9222
launch.json O arquivo terá a seguinte aparência:
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
npm startNesse caso, o depurador anexado ao processo existente do Chrome em vez de iniciar uma nova janela.
Escrevi meu próprio artigo, onde descrevi essa abordagem com ilustrações.
Instruções simples sobre como configurar o depurador para Angular no VSCode
chrome.exe --remote-debugging-port=9222. Existe alguma alternativa para a configuração única
Isso é explicado em detalhes no site do Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial
Pode usar esta configuração:
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Aqui está uma solução um pouco mais leve, funciona com Angular 2+ (estou usando Angular 4)
Também foram adicionadas as configurações do Express Server se você executar a pilha 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"
]
}
]
}
A resposta do @Asesjix é muito completa, mas, como alguns salientaram, ainda requer várias interações para iniciar ng servee iniciar o aplicativo Angular no Chrome. Consegui trabalhar com um único clique usando a seguinte configuração. A principal diferença da resposta do @ Asesjix é o tipo de tarefa agora shelle as chamadas de comando adicionadas startantes ng serveque ng servepossam existir em seu próprio processo e não impedir que o depurador seja iniciado:
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"
}
]
}
No meu caso, eu não havia usado a árvore de pastas do projeto Angular original e sabia que havia algo errado com o webRoot/ {workspaceFolder}bit, mas todas as minhas experiências não produziram resultado. Recebi uma dica de outra resposta SO, que eu ligarei se a encontrar novamente.
O que me ajudou foi encontrar o conteúdo da variável {workspaceFolder}em tempo de execução e modificá-lo para o local da minha pasta "src" na qual você tem "app / *". Para encontrá-lo, adicionei um preLaunchTaskao meu arquivo launch.json e uma tarefa para gerar o valor de {workspaceFolder}.
launch.json , que aparece após a instalação do depurador do 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 Não está presente por padrão. Pressione Ctrl + Shift + pe acho que é chamado de 'criar tarefa para outro comando' ou algo semelhante. Não consigo vê-lo depois que o tasks.json é criado. Você também pode criar o arquivo no mesmo local que o launch.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Echo values",
"command": "echo",
"args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
"type": "shell"
}
]
}
Depois de conhecer o valor de $ {workspaceFolder}, eu o corrigi para apontar para a minha pasta src na minha nova árvore de projetos e tudo funcionou. A depuração exige ng serveque tenha sido executada como tarefa de pré-lançamento ou como parte da compilação (exemplos acima) ou em um prompt de comando.
Aqui está um link para todas as variáveis que você pode usar: