I am having a hard time debugging a typescript/angularJS app generated using the popular gulp-angular
yeoman generator (https://github.com/Swiip/generator-gulp-angular). Using the following launch.json
in Visual Studio Code 0.5.0 on a Mac:
{
"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": "Launch app.ts",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/app/index.ts",
// Automatically stop program after launch.
"stopOnEntry": false,
// 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": "src/app/",
// 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.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": true,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": ".tmp/serve/app"
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": true
}
]
}
The debugger launches a node process and it stops on an exception ("angular is not defined"). It fails finding the index.ts
file, though ("Error opening 'index.ts' (File not found)"). Hitting Create file
in the error message creates a file at the root of the project, so I guess it looks for it there, where it obviously doesn't exist. I thought the cwd
configuration option would allow me to specify a root directory for the typescript sources, but it doesn't seem to make any difference.
If I symlink the src/app/index.ts
to the project's root, the debugger successfully opens it and shows me the breakpoint/exception point. The node process, however, won't go past the first instruction calling angular
:
var App = angular.module('MyApp', ['ngSanitize', 'ui.router']);
At the top of the index.ts
file I have the usual references, including
/// <reference path="../../.tmp/typings/tsd.d.ts" />
But they seem to be ignored by node. So, to summarize:
- VSC's debugger seems to look for .ts files at the wrong place, at least with my configuration
- the node process doesn't honor references
Any idea how I can solve these problems? Lunching the app with the generated gulp serve
task works fine and I can set breakpoints in safari/chrome and step into the typescript code (so code maps are fine). I would really like to use VSC's embedded debugger, though.