How to debug an Angular2 TypeScript application in Visual Studio Code?
Question
How do you successfully configure and debug an Angular2 TypeScript application in Visual Studio Code?
I have tried importing the es6-shim and reflect-metadata as well with no success. The relevant code is below. Please let me know if you require further details.
Note: I am using Angular2 Beta.
ERROR MESSAGE
Debugger listening on port 24565
c:\Users\LeviF\OneDrive\Source Code\Github\SimpleMarket\app\bin\boot.js:1
System.register(['angular2/platform/browser', './app.component'], function(exports_1) {
^
ReferenceError: System is not defined
at Object.<anonymous> (c:\Users\LeviF\OneDrive\Source Code\Github\SimpleMarket\app\bin\boot.js:1:1)
at Module._compile (module.js:399:26)
at Object.Module._extensions..js (module.js:406:10)
at Module.load (module.js:345:32)
at Function.Module._load (module.js:302:12)
at Module.runMain [as _onTimeout] (module.js:431:10)
at Timer.listOnTimeout (timers.js:93:15)
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/bin/boot')
.then(null, console.error.bind(console));
</script>
<script>
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
boot.ts
//import 'reflect-metadata';
// import 'es6-shim';
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
// This loads our AppComponent as the ROOT Component (The app entry point)
bootstrap(AppComponent);
app.component.ts
import {Component} from 'angular2/core';
import {StockComponent} from './stock/stock.component';
@Component({
selector: 'my-app',
templateUrl: 'app/src/app.view.html',
directives: [StockComponent]
})
export class AppComponent{
public name: string;
getStock(){
this.name = "hello";
console.log('trying');
}
}
Launch.json
{"version": "0.2.0",
"configurations": [
{
"name": "Launch type",
"type": "node",
"program": "app/src/boot.ts",
"stopOnEntry": true,
"sourceMaps": true,
"outDir": "app/bin"
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 3000
}
]
}
2 answers
solution1
3 ACCPTED 2016-04-10 21:50:11
I managed to make this work using the debugger-for-chrome extension for vs code. Just follow the installation instructions mentioned there, and create a launch.json file similar to this one:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]}
Also make sure that you have sourceMap set to true in your tsconfig.json. Mine looks like this:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"watch": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]}
I've tested it with the angular2 tour-of-heroes quickstart example (typescript version) and it works fine. Just make sure to run
npm start
before you run the vs debugger in chrome, so you have someone to serve the index page.
EDIT 1: The author of the extension has also added the tour-of-heroes app as a working example in his repository .
solution2
-4 2016-01-16 07:16:56
In tsconfig.json, you should be using CommonJS configuration:
"module": "commonjs",
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.