Jawaban:
launch.json(di dalam folder .vscode)launch.json(lihat di bawah)tasks.json(di dalam folder .vscode)tasks.json(lihat di bawah)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(lihat di bawah)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 Serverdan meluncurkan Chromehanya dengan satu F5klik?
launch.jsondan tasks.jsonmelakukannya di sini. Seperti yang saya pahami launch.jsonadalah meluncurkan server node dan mendengarkan port 8080, dan tasks.jsonmenginstruksikan untuk menggunakan npmdan menjalankan perintah ng serveuntuk menjalankan aplikasi.
Sepertinya tim VS Code sekarang menyimpan resep debugging.
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"]
}
]
}
Ada dua cara berbeda untuk melakukan itu. Anda dapat meluncurkan proses baru atau melampirkan ke yang sudah ada.
Poin utama dalam kedua proses ini adalah menjalankan server dev webpack dan debugger VSCode secara bersamaan .
Di launch.jsonfile Anda, tambahkan konfigurasi berikut:
{
"version": "0.2.0",
"configurations": [
{
"name": "Angular debugging session",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Jalankan server pengembang Webpack dari CLI Angular dengan menjalankan npm start
Untuk itu Anda perlu menjalankan Chrome dalam mode debugger dengan port terbuka (dalam kasus saya itu akan 9222):
Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Windows:
chrome.exe --remote-debugging-port=9222
launch.json file akan terlihat seperti berikut:
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
npm startDalam kasus ini, debugger dilampirkan ke proses Chrome yang ada alih-alih meluncurkan jendela baru.
Saya menulis artikel saya sendiri, di mana saya menjelaskan pendekatan ini dengan ilustrasi.
Instruksi sederhana bagaimana mengkonfigurasi debugger untuk Angular di VSCode
chrome.exe --remote-debugging-port=9222Apakah ada alternatif untuk konfigurasi sekali pakai
Ini dijelaskan secara rinci di situs Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial
Dapat menggunakan konfigurasi ini:
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
Ini solusi yang sedikit lebih ringan, bekerja dengan Angular 2+ (Saya menggunakan Angular 4)
Juga menambahkan pengaturan untuk Server Ekspres jika Anda menjalankan tumpukan 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"
]
}
]
}
Jawaban @Asesjix sangat menyeluruh, tetapi seperti yang ditunjukkan beberapa orang, masih membutuhkan banyak interaksi untuk memulai ng serve dan kemudian meluncurkan aplikasi Angular di Chrome. Saya mendapatkan ini bekerja dengan satu klik menggunakan konfigurasi berikut. Perbedaan utama dari jawaban @ Asesjix adalah tipe tugasnya sekarang shelldan panggilan perintah ditambahkan startsebelumnya ng servesehingga ng servebisa ada dalam prosesnya sendiri dan tidak memblokir debugger dari peluncuran:
task.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"
}
]
}
Dalam kasus saya, saya tidak menggunakan pohon folder proyek Angular asli dan saya tahu ada yang salah dengan webRoot/{workspaceFolder} bit tetapi semua percobaan saya tidak membuahkan hasil. Mendapat tip dari jawaban SO lain yang akan saya tautkan jika saya menemukannya lagi.
Apa yang membantu saya adalah menemukan konten variabel {workspaceFolder}saat runtime dan kemudian memodifikasinya ke lokasi folder "src" di mana Anda memiliki "app / *". Untuk menemukannya, saya menambahkan a preLaunchTaskke file launch.json saya dan tugas untuk mengeluarkan nilai {workspaceFolder}.
launch.json , yang muncul setelah menginstal debugger 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 Tidak ada secara default. Tekan Ctrl + Shift + p dan saya pikir itu disebut 'buat tugas untuk perintah lain' atau yang serupa. Sepertinya tidak bisa melihatnya setelah task.json dibuat. Anda juga bisa membuat file di lokasi yang sama dengan launch.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Echo values",
"command": "echo",
"args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
"type": "shell"
}
]
}
Setelah saya mengetahui nilai $ {workspaceFolder}, saya memperbaikinya agar mengarah ke folder src saya di pohon proyek baru saya dan semuanya berhasil. Debugging ng serveharus dijalankan sebagai tugas prapeluncuran atau sebagai bagian dari build (contoh di atas) atau dalam command prompt.
Berikut ini tautan ke semua variabel yang dapat Anda gunakan: