Lev*_*ler 12 debugging typescript visual-studio-code angular
如何在Visual Studio Code中成功配置和调试Angular2 TypeScript应用程序？
我曾尝试导入es6-shim和reflect-metadata也没有成功.相关代码如下.如果您需要更多详细信息,请与我们联系.
注意:我使用的是Angular2 Beta.
错误信息
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
}
]
}
我设法使用vs code 的debugger-for-chrome 扩展来完成这项工作。只需按照那里提到的安装说明进行操作，并创建一个与此类似的 launch.json 文件：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]}
另请确保在 tsconfig.json 中将 sourceMap 设置为 true。我的看起来像这样：
{
"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"
]}
我已经用 Angular2英雄之旅快速入门示例（打字稿版本）对其进行了测试，并且工作正常。只要确保运行即可
npm start
在 Chrome 中运行 vs 调试器之前，这样你就可以有人提供索引页了。
编辑 1：扩展的作者还在他的存储库中添加了tour-of-heroes 应用程序作为工作示例。
| 归档时间： |
|
| 查看次数： |
7612 次 |
| 最近记录： |