Angular2 App - Chrome 脚本为空且 VS2015 未命中断点答案

【问题标题】：Angular2 App - Chrome scripts is empty and VS2015 Does not hit breakpointAngular2 App - Chrome 脚本为空且 VS2015 未命中断点
【发布时间】：2016-04-08 12:51:39
【问题描述】：

指向断点 VS2015-Update1 弹出‘断点当前不会被命中。没有为此文档加载任何符号’ *.js.map 在我的 wwwroot/app 目录中的 *.js 旁边生成。该项目一切正常。我也尝试在 Chrome 下调试，但我不能在 source/scripts/app.ts 中删除断点，因为它是空的。我的 web.config 修改为：

<staticContent>
    <remove fileExtension=".ts" />
    <mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
</staticContent>

和

tsconfig.json 有 "sourceMap": true

谁能帮助或链接我一个可以打断点的 VS2015 Angular2 hello word 吗？

Project tree - png

import { bootstrap } from 'angular2/platform/browser';
import { Component, View } from 'angular2/core';
import { NgFor } from 'angular2/common';
import { FORM_DIRECTIVES } from 'angular2/common';

@Component({
    selector: "my-app"
})
@View({
    template: `
    {{message}}
    <br/><input [(ngModel)]="message"/>
    `,
    directives: [FORM_DIRECTIVES]
})

class AppComponent {
    message: string = "Hello word";
}

bootstrap(AppComponent);

message: string = "Hello word"; - 这里我放了断点

【问题讨论】：

您需要填写有关上下文的更多详细信息 - 这没有多大意义。 Visual Studio 和 Chrome 是什么关系？如果没有更全面的问题，这个问题听起来是无法回答的。
关系是我目前通过 VS2015 的 IIS Express 托管它，但你没关系，它基本上是两个问题，第一个与 VS2015 调试有关，第二个与 Chrome ts 调试有关
我可能不太了解 VS+Chrome 的工作原理。他们相互联系的想法对我来说似乎很奇怪。查看代码，可能不涉及 Chrome，因为您正在设置 VS 断点。无论如何，我认为这个问题不能按原样回答。将其编辑为一个。

标签： google-chrome debugging visual-studio-2015 angular

【解决方案1】：

您正在使用 ASP.NET 5 项目模板（根据上传的项目树 - png）。 ASP.NET 5 仍在 RC 中，所以我确信调试功能会得到改进，但打字稿调试应该在 Chrome 中工作。请确保在映射文件中为 .ts 源设置正确的相对路径，并确保源文件确实存在于 wwwroot 下的正确目录中。如果设置不正确，您在 Chrome 中调试时会看到一个空白的 .ts 文件（如您所述）。

【讨论】：

谢谢，我把脚本 - ts 目录移到了 wwwroot 下。 Chrome 调试从现在开始就好了。