I want to debug my Angular App with the new Visual Studio Code, but It seems there is a problem with Angular and Visual Studio Code..
This is my launch.json:
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Manager",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "/Volumes/Transcend/WorkArea/Manager/app/app.js",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArguments": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
I have this error when I try to debug my Angular app,
Error:
ReferenceError: angular is not defined
at Object.<anonymous> (/Volumes/Transcend/WorkArea/Manager/app/app.js:1:79)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.runMain [as _onTimeout] (module.js:497:10)
at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
MacBook-Pro:Manager user$ cd '/Volumes/Transcend/WorkArea/Manager'; 'node' '--debug-brk=55539' '/Volumes/Transcend/WorkArea/Manager/app/app.js'
debugger listening on port 55539
Killed: 9
app.js
/// <reference path="../typings/angularjs/angular.d.ts"/>
var routerApp = angular.module('uiRouter', ['ui.router', 'uiRouter.dmvs']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/dmvs/partial-d.html',
controller:'dController'
})
});
You can create AngularJS application in any version of Visual Studio.
To do so, go to the Run and Debug view (Ctrl+Shift+D) and select the create a launch. json file link to create a launch. json debugger configuration file. Choose Web App (Edge) from the Select debugger dropdown list.
I was having a similar issue but my project also included webpack that caused the above solutions to fail. After traversing the Internet I found a solution in a thread on github:
https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972
Anyway, this is what was done.
Note:- Before you start you must check whether you have the latest version of visual studio code and also have installed the extension called 'Debugger for Chrome' within VS Code.
Firstly, in './config/webpack.dev.js'
Then install and use the write-file-webpack-plugin:
Add the plugin to './config/webpack.dev.js' by adding:
under the Webpack Plugins at the top. Continue to add:
to the list of plugins after new new DefinePlugin(), i.e
plugins:[
new DefinePlugin({....}),
new WriteFilePlugin(),
....
]
This ensures that the source maps are written to disk
Finally, my launch.json is given below.
{
"version": "0.2.0",
"configurations": [{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/",
"runtimeArgs": [
"--user-data-dir",
"--remote-debugging-port=9222"
],
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"url": "http://localhost:3000/",
"port": 9222,
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}"
}]
}
notice the absence of '/dist/' in the webroot. with this config, source-maps are in ./dist/, but they point to ./src/. vscode prepends the absolute root to the workspace, and correctly resolves the file.
Okay, with the help of the @code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...
First, you need to download the "Debugger for Chrome Extension." You do this by typing this:
F1
ext Install Extensions
debug (then select Debugger For Chrome)
Once that is installed, I used MSFT's instructions found here:
https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome
I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:
{
"version": "0.2.0",
"configurations": [
{
// Use this to get debug version of Chrome running:
// /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "./www"
}
]
}
Also, don't forget to start Chrome in debug mode with this (for Mac):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Great editor @code!
OBS: Don't forget to kill ALL Chrome Instances as mentioned here: https://github.com/Microsoft/vscode-chrome-debug/issues/111#issuecomment-189508090
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With