Question

如何配置简单的Angular 2.0 / TypeScript 1.6项目，以便我可以在Visual Studio 2015中运行并调试应用程序。

我有来自angular.io的简单'入门'项目。问题是，由于app.js是动态加载的，我无法设置断点或从VS调试器调试文件。

我尝试在导入之前使用普通脚本标记加载文件，但是我在加载时遇到“必需的未定义”错误。

的index.html

<html>
<head>
    <title>Angular 2 App01</title>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/systemjs/dist/system.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

    <!--<script src="../src/app/app.js"></script>-->

    <script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app');
    </script>
</head>
<body>
    <my-app>loading...</my-app>
</body>
</html>

和app.ts

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: `
        <h1>My First Angular 2 App</h1>
        <h2>xx-{{txt}}-yy</h2>
    `
})
class AppComponent {
    txt: string;
    constructor() {
        this.txt = "hello from AppComponent - hmmm, cannot debug this from vs";
    }
}
bootstrap(AppComponent);

Answer 1

我可以从chrome调试源图。可以选择在chrome中启用源映射。至于为何不在IE工作，我不确定。

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx

Answer 2

问题是systemjs如何进行延迟加载。有人告诉我，应该可以通过编辑systemsjs-config来改变它。但我无法让它发挥作用。

Answer 3

我已经向Github发布了两个工作样本： angular2-systemjs-dotnet-core和 angular2-webpack-dotnet-core

如何从VS2015调试角度2应用程序

3 个答案: