Menu
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
}
]
}
830
TypeScript is great for writing client-side code as well as Node. js applications and you can debug client-side source code with the built-in Edge and Chrome debugger.
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.
155
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
